Home/ Questions/Q 4612918
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T01:28:17+00:00

Possible Duplicate: table cell width issue I have a table set up as <html>

  • 0

Possible Duplicate:
table cell width issue

I have a table set up as

<html>
 <body bgcolor="#14B3D9">
<table width="100%" border="1" bgcolor="#ffffff">
    <tr>
        <td width="25%">25</td>
        <td width="50%">50</td>
        <td width="25%">25</td>
    </tr>
    <tr>
        <td width="50%">50</td>
        <td width="30%">30</td>
        <td width="20%">20</td>
    </tr>
</table>
</body>
</html>

How do i get the 2 rows to have different cell width?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    As far as i know that is impossible and that makes sense since what you are trying to do is against the idea of tabular data presentation. You could however put the data in multiple tables and remove any padding and margins in between them to achieve the same result, at least visibly. Something along the lines of:

    <html>

<head>
  <style type="text/css">
    .mytable {
      border-collapse: collapse;
      width: 100%;
      background-color: white;
    }
    .mytable-head {
      border: 1px solid black;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-head td {
      border: 1px solid black;
    }
    .mytable-body {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
      margin-bottom: 0;
      padding-bottom: 0;
    }
    .mytable-body td {
      border: 1px solid black;
      border-top: 0;
    }
    .mytable-footer {
      border: 1px solid black;
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }
    .mytable-footer td {
      border: 1px solid black;
      border-top: 0;
    }
  </style>
</head>

<body>
  <table class="mytable mytable-head">
    <tr>
      <td width="25%">25</td>
      <td width="50%">50</td>
      <td width="25%">25</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="50%">50</td>
      <td width="30%">30</td>
      <td width="20%">20</td>
    </tr>
  </table>
  <table class="mytable mytable-body">
    <tr>
      <td width="16%">16</td>
      <td width="68%">68</td>
      <td width="16%">16</td>
    </tr>
  </table>
  <table class="mytable mytable-footer">
    <tr>
      <td width="20%">20</td>
      <td width="30%">30</td>
      <td width="50%">50</td>
    </tr>
  </table>
</body>

</html>

    JSFIDDLE

    I don’t know your requirements but i’m sure there’s a more elegant solution.

    • 0