Display table within CSS table

Question

Within a CSS table, I have a regular table with id=inner-table. The CSS table has display:table and it seems that the inner table is being treated as a cell of outer the CSS table. Therefore, the first column expands to the width of the inner table. How can I prevent the inner table from behaving like a cell of the outer CSS table? I have tried setting display: block for the inner table, but that does not work. Here is the code:

    .Table {
      display: table;
    }
    .Title {
      display: table-caption;
      text-align: center;
      font-weight: bold;
      font-size: larger;
    }
    .Heading {
      display: table-row;
      font-weight: bold;
      text-align: center;
    }
    .Row {
      display: table-row;
    }
    .Cell {
      display: table-cell;
      border: solid;
      border-width: thin;
      padding-left: 5px;
      padding-right: 5px;
    }

<body>
<div class="Table">
  <div class="Title">
    <p>This is a Table</p>
  </div>
  <div class="Heading">
    <div class="Cell">
      <p>Heading 1</p>
    </div>
    <div class="Cell">
      <p>Heading 2</p>
    </div>
    <div class="Cell">
      <p>Heading 3</p>
    </div>
  </div>
  <div class="Row">
    <div class="Cell">
      <p>Row 1 Column 1</p>
    </div>
    <div class="Cell">
      <p>Row 1 Column 2</p>
    </div>
    <div class="Cell">
      <p>Row 1 Column 3</p>
    </div>
  </div>

  <div id='inner-table'>
    <table>
      <thead>
        <tr>
          <th>Column 1</th>
          <th>Column 2</th>
          <th>Column 3</th>
        </tr>
      </thead>
      <tr>
        <td>A</td>
        <td>B</td>
        <td>B</td>
      </tr>
      <tr>
        <td>C</td>
        <td>D</td>
        <td>B</td>
      </tr>
    </table>
  </div>

  <div class="Row">
    <div class="Cell">
      <p>Row 2 Column 1</p>
    </div>
    <div class="Cell">
      <p>Row 2 Column 2</p>
    </div>
    <div class="Cell">
      <p>Row 2 Column 3</p>
    </div>
  </div>
</div>

</body>

G.L.P · Accepted Answer · 2015-05-27 04:43:56Z

1

Close the div of 1st .Table before #inner-table instead of closing it after Row div like this:

Demo

<div class="Table">
    <div class="Title">
        <p>This is a Table</p>
    </div>
    <div class="Heading">
        <div class="Cell">
            <p>Heading 1</p>
        </div>
        <div class="Cell">
            <p>Heading 2</p>
        </div>
        <div class="Cell">
            <p>Heading 3</p>
        </div>
    </div>
    <div class="Row">
        <div class="Cell">
            <p>Row 1 Column 1</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 2</p>
        </div>
        <div class="Cell">
            <p>Row 1 Column 3</p>
        </div>
    </div>
</div>
<div id='inner-table'>
    <table>
        <thead>
            <tr>
                <th>Column 1</th>
                <th>Column 2</th>
                <th>Column 3</th>
            </tr>
        </thead>
        <tr>
            <td>A</td>
            <td>B</td>
            <td>B</td>
        </tr>
        <tr>
            <td>C</td>
            <td>D</td>
            <td>B</td>
        </tr>
    </table>
</div>
<div class="Row">
    <div class="Cell">
        <p>Row 2 Column 1</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 2</p>
    </div>
    <div class="Cell">
        <p>Row 2 Column 3</p>
    </div>
</div>

answered May 27, 2015 at 4:43

G.L.P

7,2075 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2233706 Over a year ago

I want the columns of the all the rows of the outer table to be of the same width. If I add more text to a column of the second row of the outer table, the columns are no longer aligned. I've updated your fiddle to demonstrate: jsfiddle.net/y0va30e0/1

user2233706 · Accepted Answer · 2015-05-28 01:59:28Z

What I need is the inner table to span multiple columns of the outer table. From what I've seen, there isn't a way in to do this in CSS. Therefore, I used a table within a table, which the inner table being inside a colspan td:

<html>

<body>

  <table>
    <th>
      <tr>
        <td>
          <p>Heading 1</p>
        </td>
        <td>
          <p>Heading 2</p>
        </td>
        <td>
          <p>Heading 3</p>
        </td>
      </tr>
    </th>

    <tr>
      <td>
        <p>Row 1 Column 1</p>
      </td>
      <td>
        <p>Row 1 Column 2</p>
      </td>
      <td>
        <p>Row 1 Column 3</p>
      </td>
    </tr>

    <tr>
      <td colspan='3'>
        <table>
          <thead>
            <tr>
              <th>Column 1</th>
              <th>Column 2</th>
              <th>Column 3</th>
            </tr>
          </thead>
          <tr>
            <td>A</td>
            <td>B</td>
            <td>B</td>
          </tr>
          <tr>
            <td>C</td>
            <td>D</td>
            <td>B</td>
          </tr>
        </table>
      </td>
    </tr>

    <tr>
      <td>
        <p>Row 2 Column 1</p>
      </td>
      <td>
        <p>Row 2 Column 2</p>
      </td>
      <td>
        <p>Row 2 Column 3</p>
      </td>
    </tr>
  </table>

</body>

</html>

Collectives™ on Stack Overflow

Display table within CSS table

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related