html - 在不同的 中宽度不同

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 开始了。我可以做这样的事情而不必开始一个新表吗？

<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

But I was wondering if I could do something like this

没有。不带 table 。使用表格进行布局是一种糟糕的形式 - 坚持将其用于表格数据并使用更适合您的消息系统布局的东西，例如 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>