CODEWITHSUNDEEP
htmlcsshtml-table
chriscatfr
chriscatfr

Reputation: 2662

td width fixed even if screen is too small

I don't know in advance how many <td> I will have. I just know that I want their width fixed even if the table gets too large for the screen.

For the moment, the following widths are ignored as soon as my table reach the right side of the screen.

<table>
  <tr>
    <td width="260" style="width: 260px;">Text only</td>
    <td width="260" style="width: 260px;">Text only</td>
    <td><img src="img/image.jpg" width="400"/></td>
    <td><img src="img/image.jpg" width="400"/></td>
    <td width="260" style="width: 260px;">Text only</td>
  </tr>
</table>

The issue is: <td> with <img> inside are 400px and it's just what I wanted, but <td>s with text only inside are downsized if the table gets wider than the screen.

My goal is to get the visitor scrolling from left to right instead of the usual up/down

edit: width of my IMG are not known in advance either. And strings are provided in HTML, so I would have to extract width="400", I'd rather not

Upvotes: 1

Views: 1773

Answers (2)

S.Yavari
S.Yavari

Reputation: 876

Check this code:

<table border="1">
    <tr>
        <td width="260"><span style="width: inherit; display: block;">Text only</span></td>
        <td width="260"><span style="width: inherit; display: block;">Text only</span></td>
        <td><img src="img/image.jpg" width="800"/></td>
        <td><img src="img/image.jpg" width="800"/></td>
        <td width="260"><span style="width: inherit; display: block;">Text only</span></td>
    </tr>
</table>

Upvotes: 2

Ray
Ray

Reputation: 21905

If you can come up with a reasonable maximum width for your table, you can wrap it in a div set to that width. This will allow the table to expand (the cells will be sized as you want them) and the page will show a horizontal scrollbar. The drawback is that if your table is much narrower than the max width, the page will scroll to the right beyond the end of the table.

<div style="width:5000px;">
  <table>...</table>
</div>

Upvotes: 0

Related Questions