How to make table consistent in all browsers

Question

I am starting to learn HTML. In a table I created I use rowspan, but when I insert an image in a column that is expanded the image seems to not expand in the whole cell. So the rows of the table start to have different heights. This happens in EDGE and IE but not in OPERA,Firefox etc as is shown in the images below. Column heights are not consistent there too. Ideally, I would like to have the following heights (assuming fixed row height) for the cells identified by their content:

Headers 1 and 2: 1 column

Headers 3 and 4: 2 columns

Left image height: 4 columns

Right image height: 6 columns

body{
    background-color:#FFFF99
}
img {
    height: 70px;
    display:block;
}
h1{
    font-style: italic;
    color:#3300CC;

}
table, th, td {
    border: 1px solid black;
    border-spacing:3px;
}
table {
  width: 75%;
}

th {
    padding:4px;
    text-align:right;
}
td{
    padding:4px;
}

.Tablestyle1{
  background-color: #00CC66;
  text-align: center
}

<h1>TITLE </h1>
    <table>
    <tr class="Tablestyle1" >                                       <!--First Row-->
        <td>A</td>
        <td colspan="4">B</td>
    </tr>
    <tr>
        <td class="Tablestyle1"rowspan="2">C</td>
        <th>Header1</th>
        <td> D</td>
        <td rowspan="6"> <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt1" > 
        <td rowspan="6">
            <ol type="I">
                <li>List1</li>
                <li>List2</li>
                <li>List3</li>
            </ol>
    </tr>
    <tr>
        <th>Header2</th>
        <td>F</td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="https://www.w3schools.com/images/w3schools_green.jpg" alt="alt2" >
        </td>
        <th rowspan="2">Header3</th>
        <td rowspan="2">H</td>
    </tr>
    <tr></tr>
    <tr>
        <th rowspan="2">Header4</th>
        <td rowspan="2">L</td>
    </tr>
    <tr></tr>
    <tr>
        <td colspan="5">
            <a href="*"> Link1</a>
        </td>
    </tr>   
    </table>

score 1 · Answer 1 · edited Jan 02 '22 at 13:14

1

For the height, you can set height to all td's

Another option (also for the width) you can set class for every cell you want, and define the css rules for it.

You can see the example here.

https://jsfiddle.net/5upeywrd/2/

I did the rule for the header cell "A".

edited Jan 02 '22 at 13:14

Nimantha

6,405
6
28
69

answered Jan 03 '19 at 07:59

SeReGa

1,219
2
11
32

eye-wonder · Accepted Answer · 2019-01-15T09:48:57.757

Here is a stripped down example with inline css to explain how to style each element. The colspans and rowspans is also simplified.

This is a fixed height solution. If you want the height to be adjusted to the content, you might need some jQuery magic. Flexbox and tables won't work cross browser I think.

<table style="border-collapse: collapse; width: 75%; height: 216px;" border="1">
  <tbody>
    <tr style="height: 36px;">
      <td style="width: 30%; height: 36px;">A</td>
      <td style="width: 70%; height: 36px;" colspan="4">B</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 30%; height: 72px;" rowspan="2">C</td>
      <td style="width: 15%; height: 36px;">1</td>
      <td style="width: 10%; height: 36px;">D</td>
      <td style="width: 20%; height: 144px;" rowspan="4">Image</td>
      <td style="width: 25%; height: 144px;" rowspan="4">List</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 15%; height: 36px;">2</td>
      <td style="width: 10%; height: 36px;">F</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 30%; height: 72px;" rowspan="2">Image</td>
      <td style="width: 15%; height: 36px;">3</td>
      <td style="width: 10%; height: 36px;">H</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 15%; height: 36px;">4</td>
      <td style="width: 10%; height: 36px;">L</td>
    </tr>
    <tr style="height: 36px;">
      <td style="width: 100%; height: 36px;" colspan="5">Link</td>
    </tr>
  </tbody>
</table>

If the content is too big the table could still be distorted – unless you use overflow:hidden https://stackoverflow.com/a/509825/762640

How to make table consistent in all browsers

2 Answers2