HTML table wrap td

Question

I've two tables like below:

<table width="100px">
  <tr>
    <td>
      <table width="100%">
        <tr>
          <td>One</td>
          <td>Two</td>
          <td>Three</td>
          <td>Four</td>
          <td>Five</td>
          <td>Six</td>
          <td>Seven</td>
          <td>Eight</td>
          <td>Nine</td>
          <td>Ten</td>
        </tr>
      </table>
    </td>
  </tr>
</table>

When I run this my internal table is exceeding parent table width (100px) because it is having more TDs. How can restrict this?

All values are coming in the same row and it is going out of reserved area (100px). Is there any way to display values in multiple rows with the above code?

each is a row. it exceeds its parent wide because of the text length. just have individual onetwo etc. — KMC, May 22 '13 at 07:00
Yes if we did like that problem will be solved. But I wanted to do with the above code only. I'm searching for css or any other solution — jestges, May 22 '13 at 07:02

score 2 · Accepted Answer · answered May 22 '13 at 07:19

You cannot do this with <table> layout. Even adding the following CSS will not fix it, instead the cells are just rendered over each other.

table {
    table-layout:fixed;
    overflow:hidden;
}

The HTML table column element <col> element will also not really help since it will only apply to the first <td>.

One approach would be to use a non-<table> layout instead, for example:

HTML

<table>
<tr>
    <td>
        <div id="container">
            <div>One</div><div>Two</div><div>Three</div><div>Four</div><div>Five</div>
            <div>Six</div><div>Seven</div><div>Eight</div><div>Nine</div><div>Ten</div>
        </div>
    </td>
</tr>
</table>

CSS

table {
    width:100px;
}

#container div {
    display:inline-block;
}

See demo of how <col> does not work and how the <div> layout wraps at 100px.

score 0 · Answer 2 · edited May 23 '17 at 12:05

0

U can't fit 10 words like this in 100px with normal size font.

I think you might want to use <tr></tr>(row) tags for each word instead of td(cell)

Or you really want the 100px row to be split in 10 cells and to contain those words? (I think if might be somehow possible but u won't see the words :D or maybe if you used little font and somehow made the words to be rotated about 90 degrees...)

This Q/A Word-wrap in an HTML table might help u in that case.

edited May 23 '17 at 12:05

Community

1
1

answered May 22 '13 at 07:03

Ms. Nobody

1,219
3
14
34

Hey this is for word-wrap in a single td. But I want to wrap entire TD itself only. – jestges May 22 '13 at 07:11
I'm still not sure what u want. Can u draw us picture how your output should look? :D I'm kinda confused. Edit: If u want the TDs to go under themselvels like new rows I think that ain't possible. U have a table - rows and columns. U have 10 cells in one row. I don't think u can move those cells under themselves in one row cause that will make them a rows?! Why exactly u want to do this and can't just make instead of s? – Ms. Nobody May 22 '13 at 07:21

score 0 · Answer 3 · edited May 23 '17 at 11:57

It will help you:

Fixed Table Cell Width

Use style attr 'table-layout:fixed' with table

or try this:

// div css
<style>
.frame {
    overflow-x:scroll;
    width:100px;
}
</style>

<div class='frame'>
    <table width='100px'>
        <tr>
            <td>
                <table width='100%'>
                    <tr>
                        <td>One</td>
                        <td>Two</td>
                        <td>Three</td>
                        <td>Four</td>
                        <td>Five</td>
                        <td>Six</td>
                        <td>Seven</td>
                        <td>Eight</td>
                        <td>Nine</td>
                        <td>Ten</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>
</div>

Even with fixed table width it is exceeding parent table width. like if I give 20px for each td overall width become 200px. In this case also it is failing :( — jestges, May 22 '13 at 07:09
@jestges: Okay, then there is only one way you can try.. check updated answer — Nono, May 22 '13 at 07:30

score 0 · Answer 4 · answered May 22 '13 at 07:07

0

add a class to table and set this css code

table.restrict { table-layout:fixed; }
table.restrict td { overflow: hidden; }

answered May 22 '13 at 07:07

mina __________

46
2
7

HTML table wrap td

4 Answers4