1

I am wondering whether it is possible to have a fixed table layout and have one column in the middle with a wider width than all the others...?

I'd appreciate any help! :)

Thanks, Piotr.

Makram Saleh
  • 8,613
  • 4
  • 27
  • 44
Piotr
  • 1,437
  • 6
  • 19
  • 24
  • Possible duplicate of [Table with table-layout: fixed; and how to make one column wider](https://stackoverflow.com/questions/6253963/table-with-table-layout-fixed-and-how-to-make-one-column-wider) –  Sep 06 '17 at 15:54

3 Answers3

1

Just add the style=\"width: 20%;\" to the th (or td) tag of that column. Check [1]:

<table style="table-layout:fixed; border: 1px solid black; ">
    <tr>
        <th style="width:30% ">name</th>
        <th style="width:70% ">Color</th>
    </tr>
    <tr>
        <td>N1</td>
        <td>red</td>
    </tr>
    <tr>
        <td>N2</td>
        <td>blue</td>
    </tr>
</table>

[1] http://jsfiddle.net/AP5rL/1/

nabil828
  • 39
  • 4
0

Can you add a class to the column that needs a different width? If so, you can use the class to manipulate width:

HTML

<table width="650">
  <tr>
    <td>normal</td>
    <td>normal</td>
    <td class="wider">wide</td>
    <td>normal</td>
    <td>normal</td>
  </tr>
</table>

CSS

td.wider {
  width: 250px;
}
Deborah
  • 4,316
  • 8
  • 31
  • 45
0

Just set the width attribute on the TD tag corresponding to the wider column.

Example:

<table width="650">
    <tr>
        <td width="100">normal</td>
        <td width="100">normal</td>
        <td width="250">wide</td>
        <td width="100">normal</td>
        <td width="100">normal</td>
    </tr>
</table>
Makram Saleh
  • 8,613
  • 4
  • 27
  • 44
  • hi, thanks for your answer, but it didn't help... as long as i have in my css: `table-layout: fixed;` it will not work, however i need the widths to be fixed, so that when i dynamically add rows to the table with javascript, my columns don't resize, as it looks bad... one of them needs to be wider than the others though to accommodate a wider drop-down select element. thanks again, and hoping for some more suggestions! :) – Piotr Jul 12 '11 at 08:57
  • In this case, I guess you have to use JS to fix it. – Makram Saleh Jul 12 '11 at 09:01
  • how to fix it with js, though... any ideas? – Piotr Jul 12 '11 at 09:03