Fix the width of html tag

Question

Here is my code snippet-

<table style="border:1px solid #898989; table-layout:fixed">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed">
ShortText
</td>
</tr>
</table>

And my output looks like this-

The <td> contents don't contain space. I want the width of <td> to remain fixed as they are defined (25% for LongText... and 75% for ShortText). Are there any CSS attributes I can use?

What exactly do you want to happen with the text that doesn’t fit the width – should it just be cut off, flow into multiple lines, …? // Add a `width` to your table, so that `table-layout:fixed` can work as expected. — CBroe, Jan 08 '16 at 11:27
I've updated the `` to have a width of `99%`, but the result is still the same. I've tried it here - http://www.w3schools.com/html/tryit.asp?filename=tryhtml_default — AlwaysALearner, Jan 08 '16 at 11:52

score 2 · Answer 1 · answered Jan 08 '16 at 11:28

Use this

table {
  width: 100%; /* As wide as the containing block */
  word-wrap: break-word; /* Allow to break too long words */
}

table {
  border: 1px solid #898989;
  table-layout: fixed;
  width: 100%;
  word-wrap: break-word;
}
td {
  border: 1px solid #898989;
}
td:first-child {
  width: 25%;
}

<table>
  <tr>
    <td>
      LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
    </td>
    <td>
      ShortText
    </td>
  </tr>
</table>

score 1 · Answer 2 · answered Jan 08 '16 at 11:29

1

if you want to use CSS you can simply define the width in CSS.

<td  style="width=25%; overflow:hidden; border:1px solid #898989; table-layout:fixed">

select the attribute of overflow

answered Jan 08 '16 at 11:29

Arjan Shrestha

98
8

gagan mahatma · Answer 3 · 2016-01-08T13:45:55.233

First you need to give a fix width to table and then any td will take width according to the table's width. I try this please check and let me know if working for you :

<table style="border:1px solid #898989; table-layout:fixed;width:600px;">
<tr>
<td width="25%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
</td>
<td width="75%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
ShortText
</td>
</tr>
</table>

It's depend on you that how much width's table you want so if you want that your table width will fixed then provide fix width otherwise if you didn't provide any width your table will took same width that it's parent div has, for example :

                 <div style="width:600px">
                    <table style="border:1px solid #898989; table-layout:fixed;width:100%;">
                    <tr>
                    <td width="25%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
                    LongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongTextLongText
                    </td>
                    <td width="75%" style="border:1px solid #898989; table-layout:fixed;word-wrap:break-word">
                    ShortText
                    </td>
                    </tr>
                    </table>
                </div>

In this case table will took 500px width because table don't have any width so it is taking same width that it's parent div has. And if you will provide width then it will take width according to that as my first comment.

does that mean I have to give a fixed width for `` as well, and not in terms of `%`age like I've given in my question? — AlwaysALearner, Jan 08 '16 at 12:14
Hey I update my previous comment with your this question so please check that. Here in comment we have some limitation of words so I update my comment with new answer. — gagan mahatma, Jan 08 '16 at 17:53

Fix the width of html tag

3 Answers3