在不同的

Question

我看起来像this JFiddle here。

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

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

我注意到每个<tr>新表开始后。我可以做这样的事情而不必开始新桌子吗？

<table class="mytable mytable-head">
  <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>

有没有一种简单的方法，或者每次都应该开一张新桌子？

Answer 1

  

但我想知道我是否可以做这样的事情

没有。没有桌子。使用表格进行布局的不良形式 - 坚持将其用于表格数据，并使用更适合您的消息传递系统布局的内容，如flexbox：

.messages {
  max-width: 80%;
  margin: 0 auto;
}

.messages blockquote {
  display: flex;
  margin: 0px;
}

.messages blockquote cite {
  flex-grow: 1;
  vertical-align: middle;
  align-self: center;
}

.messages blockquote p {
  max-width: 70%;
  background: #eee;
  padding: 20px;
  border-radius: 1em;
  margin: 10px;
}

.messages .sender {
  flex-direction: row-reverse;
}

<div class="messages">
  <blockquote class="sender">
    <cite>Bob</cite>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut volutpat lobortis sem non gravida.</p>
  </blockquote>
  <blockquote class="recipient">
    <cite>Alice</cite>
    <p>Etiam dignissim nisi quam, eget tempus enim placerat sed. Integer et nulla nisl. </p>
  </blockquote>
  <blockquote class="sender">
    <cite>Bob</cite>
    <p>Aliquam eu est eget urna imperdiet accumsan. Cras sit amet tortor et enim feugiat blandit.</p>
  </blockquote>
  <blockquote class="recipient">
    <cite>Alice</cite>
    <p>Lorem ipsum</p>
  </blockquote>
  <blockquote class="sender">
    <cite>Bob</cite>
    <p>Ut in dui in lectus maximus dapibus id ut sapien. Nulla feugiat arcu nec metus gravida mattis.</p>
  </blockquote>
</div>

Answer 2

如果您希望列对齐方式不同，建议您使用flex 您可以为每种类型的行设置flex-basis。

例如：

＆＃13;

＆＃13;

.container {
  display: flex;
}
.container span {
  outline:1px solid black;
}

.container.row1 span {
  background-color: lightblue;
}
.container.row2 span {
  background-color: lightgreen;
}
.container.row3 span {
  background-color: thistle;
}

.row1 span:nth-child(1),
.row1 span:nth-child(3) {
  flex: 0 0 25%;
}
.row1 span:nth-child(2) {
  flex: 0 0 50%;
}

.row2 span:nth-child(1) {
  flex: 0 0 50%;
}
.row2 span:nth-child(2) {
  flex: 0 0 30%;
}
.row2 span:nth-child(3) {
  flex: 0 0 20%;
}

.row3 span:nth-child(1),
.row3 span:nth-child(3) {
  flex: 0 0 16%;
}
.row3 span:nth-child(2) {
  flex: 0 0 68%;
}

＆＃13;

<div class="container row1">
  <span>25</span>
  <span>50</span>
  <span>25</span>
</div>

<div class="container row2">
  <span>50</span>
  <span>30</span>
  <span>20</span>
</div>

<div class="container row1">
  <span>25</span>
  <span>50</span>
  <span>25</span>
</div>

<div class="container row2">
  <span>50</span>
  <span>30</span>
  <span>20</span>
</div>

<div class="container row3">
  <span>16</span>
  <span>68</span>
  <span>16</span>
</div>

<div class="container row1">
  <span>25</span>
  <span>50</span>
  <span>25</span>
</div>

<div class="container row2">
  <span>50</span>
  <span>30</span>
  <span>20</span>
</div>

<div class="container row3">
  <span>16</span>
  <span>68</span>
  <span>16</span>
</div>

＆＃13;

＆＃13;

＆＃13;