How to limit a table to text inside it for cells do not stretch?


#1


The table looks way too big in width and height too in my blog, i usually see cute well designed tables in some blogs and websites, i don't have good knowledge of html i have just found a table generator at "tablesgenerator.com" but i'm playing with it to discover more things. I have typed some characters to similar as in the blog table the table stretches to longer than where the characters are making it huge table.


<style type="text/css">
.tg  {border-collapse:collapse;border-spacing:0;}
.tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 1px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 1px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;}
.tg .tg-wy78{font-size:16px;font-family:"Lucida Console", Monaco, monospace !important;;background-color:#92dd91;color:#343300;text-align:center}
.tg .tg-fxl4{background-color:#fffff4;text-align:center;vertical-align:top}
</style>
<table border="1" class="tg">
  <tr>
    <th class="tg-wy78">abcdeirutyshgsbdfopcutrewnmkdjfhritueytop</th>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">wwwr tttter eeeee</td>
  </tr>
  <tr>
    <td class="tg-fxl4">abcdeirutyshgsbdfopcutrewnmkdjfhritueytop</td>
  </tr>
  <tr>
    <td class="tg-fxl4">wwwr tttter eeeee</td>
  </tr>
  <tr>
    <td class="tg-fxl4">wwwr tttter eeeee</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
  <tr>
    <td class="tg-fxl4">hsjueirolksjdieurytn fff wwwww</td>
  </tr>
</table>


#2

MDN - tables, at the bottom is what you are looking for:

CSS properties that may be especially useful to style the <table> element:
width to control the width of the table;


#3

Thank you for your reply but i couldn't find the answer there, what i have to add or change?


#4

you can simply set the width? Its at the bottom, you can click on it to get more information. I linked to this page so you could improve upon your understanding of tables


#5

I don't know where to place the width in this table code


#6

You have any understanding of html and css at all?

width is a css property, so it needs to be in your internal stylesheet

You don't have a table css selector, but you have do have a .tg class selector, which is the class for your table, so maybe you should add it there?


#7

I think i don't have understanding of css, i know basic html only.
Can i create a table using word and paste in my website?


#8

you should really take a html and css course here on codecademy, or somewhere else. You are just trying without understanding

Or find someone else to help you, it seems i am unable to do so

......., i don't even know what to say to that


#9

:cry: ok i've tried a course here before but couldn't learn too.


#10

for what reason? You don't have to take the course here, there are many sites which offer free html and css courses


#11

Just so I can understand. Your question is which lesson?


#12

its not lesson related, the lessons wouldn't suggest using a table generator


#13

Ok, I got it.
Anyway, his codes are very strange to me '-'


#14

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.