All geek questions in one place

HTML table - changing the width of one cell in a column

Is there a more elegant solution to achieve the same effect?

HTML table with different cell widths in one column

The code I have is the following:

<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
    <style type="text/css">
      table { border-collapse: collapse; }
      td { border: solid 1px; }
      td.nest { padding: 0px; }
      td.nest table td { border-width: 0px 1px; }
      td.nest table td:first-child { border-left: none; }
      td.nest table td:last-child { border-right: none; }
    </style>
  </head>
  <body>
    <table>
      <colgroup>
        <col style="width: 3em;"/>
        <col style="width: 6em;"/>
        <col style="width: 9em;"/>
      </colgroup>
      <tr><td>1</td><td>2</td><td>3</td></tr>
      <tr><!-- Somehow get rid of the nested table and keep just the tds -->
        <td class="nest" colspan="3">
          <table>
            <tr>
              <td style="width: 4em;">1</td>
              <td style="width: 6em;">2</td>
              <td style="width: 8em;">3</td>
            </tr>
          </table>
        </td>
      </tr>
      <tr><td>1</td><td>2</td><td>3</td></tr>
    </table>
  </body>
</html>

The only way I can work so far is to attach another table to the first. I don’t really like it, because ideally I only need one table, and there is a lot of extra CSS to fit the borders of the first table without adding to the cell size ( colspan="3"). I want to be able to replace a nested table with a regular one <tr>with three <td>in it.

, , , , position: absolute;, , . .

, , , <div> s .. CSS? <table>, <td> no colspan= s. CSS, . , .

+4
4

, .
, , .

, .


div style="display: table-cell;".




, colspan .
:

Colspan

 <col style="width: 3em;"/>
 <col style="width: 1em;"/>
 <col style="width: 5em;"/>
 <col style="width: 1em;"/>
 <col style="width: 8em;"/>




<!DOCTYPE html>
<html>
  <head>
    <title>Table Test</title>
      <style type="text/css">
          table {
              border-collapse: collapse;
          }

          td {
              border: solid 1px;
          }

        td.nest {
            padding: 0px;
        }

        td.nest table td {
            border-width: 0px 1px;
        }

        td.nest table td:first-child {
            border-left: none;
        }

        td.nest table td:last-child {
            border-right: none;
        }
    </style>
</head>
<body>

    <table >
        <colgroup>
            <col style="width: 3em;" />
            <col style="width: 1em;" />
            <col style="width: 5em;" />
            <col style="width: 1em;" />
            <col style="width: 8em;" />
        </colgroup>
        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
        <tr>
            <td colspan="2">1</td>
            <td colspan="2">2</td>
            <td>3</td>
        </tr>

        <tr>
            <td>1</td>
            <td colspan="2">2</td>
            <td colspan="2">3</td>
        </tr>
    </table>

</body>
</html>
+1

... CSS, "" .

, , psuedo , .

-

CSS

  table {
      border-collapse: collapse;
      table-layout:fixed;
  }
  td {
      border: solid 1px;
      border-width:1px 0px 1px 0px;
      width:33%;
      position:relative;
  }
  td:nth-child(1) {
      border-left:solid 1px;
  }
  td.nest {
      padding: 0px;
  }
  td.nest table td {
      border-width: 0px 1px;
  }
  td.nest table td:first-child {
      border-left: none;
  }
  td.nest table td:last-child {
      border-right: none;
  }
  td:after {
      content:'';
      position:absolute;
      right:0;
      border-right:1px solid black;
      top:0;
      bottom:0;
  }
  tr:nth-child(2) td:nth-of-type(1):after, tr:nth-child(2) td:nth-of-type(2):after {
      right:-20px;
  }
  tr:nth-child(2) td:nth-of-type(2), tr:nth-child(2) td:nth-of-type(3) {
      padding-left:25px;
  }

HTML

<table>
    <colgroup>
        <col style="width: 3em;" />
        <col style="width: 6em;" />
        <col style="width: 9em;" />
    </colgroup>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
</table>
0

....

 <table>
      <tr>
    <td style="width:100px"></td>
    <td style="width:300px"></td>
    <td></td>
  </tr>
    </table>

the first column will be 100 pixels wide and the second column 300 pixels wide, and the last will have a default width

0
source

You can use the following html, for example:

<table style="width: 300px;">
    <colgroup>
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
        <col span="1" style="width: auto;">
    </colgroup>
    <tbody>
        <tr>
            <td></td>
            <td colspan="3"></td>
            <td colspan="2"></td>            
        </tr>
        <tr>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>       
        </tr>
        <tr>
            <td colspan="2"></td>
            <td colspan="2"></td>
            <td colspan="2"></td>      
        </tr>
    </tbody>
</table>
0
source

Source: https://habr.com/ru/post/1548483/

More articles:


All Articles