CSS表格中的显示表格

在CSS表格中，我有一个包含id=inner-table的常规表格。 CSS表格有display:table，看起来内部表格被当作CSS表格外部的单元格。因此，第一列扩大到内表的宽度。我怎样才能防止内部表的行为像外部CSS表的单元格？我试过为内表设置display: block，但这不起作用。下面是代码：CSS表格中的显示表格

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>

来源

2015-05-27 user2233706

后 DIV这样#inner-table之前关闭的第一个.Table股利而不是关闭它的什我需要的是内表跨越外表的多个列。从我所看到的，在CSS中没有办法做到这一点。因此，我使用的表，它的内表里面是内的表的colspantd：

<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>

来源

2015-05-27 04:43:56

我想要的外表的所有行的列是相同的宽度。如果我将更多文本添加到外表第二行的列中，则列不再对齐。我更新了你的小提琴演示：http://jsfiddle.net/y0va30e0/1/ – user2233706

：

.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>

来源

2015-05-27 20:28:01 user2233706

CSS表格中的显示表格

回答

相关问题