CODEWITHSUNDEEP
htmlcsshtml-table
NoOorZ24
NoOorZ24

Reputation: 3222

Table column sizing involving colspan

I managed to kinda achieve my intended design but it feels kinda like a hack.

So I'm working with this table and now cell size looks exactly as I'd like it to be, but I have to add extra row on top of my table (and hide it, but not in example so it's easier to understand). So if you try and delete that top row you can see how it all gets messed up (description fields don't look the same).

http://jsfiddle.net/nooorz24/cea57mhd/4/

table {
    width: 100%;
}

table td {
    border: 1px solid black;
}
<table>
    <tr>
        <td style="width: 1px;"></td>
        <td style="width: 10000px;"></td>
        <td style="width: 1px;"></td>
        <td style="width: 10000px;"></td>
    </tr>
    <tr>
        <td style="width: 1px;">IMG</td>
        <td style="width: 10000px;" colspan="2">Description text</td>
        <td></td>
    </tr>
    <tr>
        <td colspan="2"></td>
        <td style="width: 1px;">IMG</td>
        <td style="width: 10000px;">Description text</td>
    </tr>
</table>

As far as I can understand it's because I try to set width to a cell that has colspan="2" and html doesn't understand how to work with that.

Can this be solved without adding extra row?

Upvotes: 0

Views: 159

Answers (1)

Salman Arshad
Salman Arshad

Reputation: 272096

You can use the HTML col element which is designed just for that: styling or defining common attributes for an entire column.

table {
  width: 100%;
}

table td {
  border: 1px solid black;
}
<table>
  <colgroup>
    <col style="width: 1px">
    <col style="width: 10000px;">
    <col style="width: 1px">
    <col style="width: 10000px;">
  </colgroup>
  <tr>
    <td>IMG</td>
    <td colspan="2">Description text</td>
    <td></td>
  </tr>
  <tr>
    <td colspan="2"></td>
    <td>IMG</td>
    <td>Description text</td>
  </tr>
</table>

Upvotes: 5

Related Questions