Question

我有一点情况，我需要一些帮助才能搞清楚。我有一个表，第一行有三列，第二行有两列。我尝试使用colspan和style属性作为第二行的列，但是我无法让第二行占据表格宽度的100％，所以我可以将项目

所以现在需要66％，因为第一行有三列。

THIS IS MY CODE

P.S。

我已经设法使用两个表，但手机上的结果看起来很奇怪，因为第二个表的呈现方式与第一个不同，因为它只有两列。

感谢任何帮助

Answer 1

对第一行中的单元格使用colspan="2"，对第二行中的单元格使用colspan="3"。每行最多可添加6个单元格，从而实现所需的分配/分割。

＆＃13;

<table style="width: 100%;" align="center">
    <tbody>
       
        <tr>
            <td colspan="2" style="text-align: center; vertical-align: middle;">
              <h4 style="text-align: center;"><span style="font-size: 18px;">Judith Steenvoorden<br /></span></h4>
              <h6 class="TextColor" style="text-align: center;"><span style="font-size: 10px;">voorzitter van College van Bestuur<br />
            van stichting ZAAM<br />
            </span><br />
            <div><br />
            </div>
            </h6>
            </td>
            <td colspan="2" style="text-align: center; vertical-align: middle;">
            <h4 style="text-align: center;"><span style="font-size: 18px;">Martine Bakker<br />
            </span></h4>
            <h6 class="TextColor" style="text-align: center;"><span style="font-size: 10px;">projectsecretaris van de Woltjer Stichting<br />
            </span><br />
            <div><br />
            </div>
            </h6>
            </td>
            <td colspan="2" style="text-align: center; vertical-align: middle;">
            <h4 style="text-align: center;"><span style="font-size: 18px;">Paul Rosenm&ouml;ller<br />
            </span></h4>
            <h6 class="TextColor" style="text-align: center;"><span style="font-size: 10px;">voorzitter van de VO-raad<br />
            </span><br />
            <div><br />
            </div>
            </h6>
            </td>
        </tr>
         
        <tr>
            <td colspan="3" style="text-align: center; vertical-align: middle;">
            <h4 style="text-align: center;"><span style="font-size: 18px;">Ruud van Baarsen<br />
            </span></h4>
            <h6 class="TextColor" style="text-align: center;"><span style="font-size: 10px;">leraar ABC Noorderlicht en verkozen<br />
            tot &lsquo;Meest inspirerende leerkracht&rsquo;<br />
            </span></h6>
            <br />
            <div><br />
            </div>
            </td>
            <td colspan="3" style="text-align: center; vertical-align: middle;">
            <h4 style="text-align: center;"><span style="font-size: 18px;">Senna van Alphen<br />
            </span></h4>
            <h6 class="TextColor" style="text-align: center;"><span style="font-size: 10px;">van het Zuiderlicht College<br />
            <div><br />
            </div>
            </span><br />
            <div><br />
            </div>
            </h6>
            </td>
        </tr>
    </tbody>
</table>

＆＃13;

Answer 2

你可以试试这个：

＆＃13;

tr,td {
border:1px solid #000;
padding:50px;
}

＆＃13;

<table >
<tr>
<td colspan='2'>content</td>
<td colspan='2'>content</td>
<td colspan='2'>content</td>
</tr>
<tr>
<td colspan='3'>content</td>
<td colspan='3'>content</td>
</tr>
</table>

＆＃13;

Answer 3

希望你会发现它有效。这是没有表格的div结构。您还可以查看https://codepen.io/ipg1421/pen/GMjxWd

<div id="wrapper" style="width: 100%;">
  <div style="display: table; width: 100%;">
    <div class="cell33">
        <h4>Judith Steenvoorden</h4>
        voorzitter van College van Bestuur<br />
        van stichting ZAAM<br />
    </div>
    <div class="cell33">
        <h4>Martine Bakker</h4>
        projectsecretaris van de Woltjer Stichting
    </div>
    <div class="cell33">
        <h4>Paul Rosenm&ouml;ller</h4>
        voorzitter van de VO-raad
    </div>
  </div>
  <div style="display: table; width: 100%;">
    <div class="cell50">
        <h4>Ruud van Baarsen</h4>
        leraar ABC Noorderlicht en verkozen<br />
        tot &lsquo;Meest inspirerende leerkracht&rsquo;<br />
    </div>
    <div class="cell50">
        <h4>Senna van Alphen</h4>
        van het Zuiderlicht College
    </div>
  </div>
</div>

CSS：

.cell33 {
    width: 33%; 
    display: table-cell;
    text-align: center; 
    vertical-align: middle;
    border: 1px solid #ddd;
    }
.cell50 {
    width: 50%; 
    display: table-cell;
    text-align: center; 
    vertical-align: middle;
    border: 1px solid #ddd;
    }

HTML表格布局3x2

3 个答案: