Question

这是我现在拥有的表格以及我要创建的表格：

这是我的代码：

HTML：

   <table class="table-1">
            <tr>
                <th>Name:</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th rowspan="2">Telephone:</th>
                <td>55577854</td>
            </tr>
    </table><br><br>
    <table class="table-1">
            <tr>
                <th>Name:</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th rowspan="2">Telephone:</th>
                <td>55577854</td>
            </tr>
        </table>

CSS：

.table-1 th, td {
    text-align: left;
}

Answer 1

这样的东西？

<table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
            <th>Name:</th>
            <td>Steve Jobs</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
</table>

Answer 2

我认为最优雅的方式是使用flexbox：）

您所要做的就是用父div包装您的代码并拥有该flex。然后我们还可以添加一些左文本对齐以保持数据在列中并添加一些右边距以让它呼吸。

.table-container {
  display: flex;
}

.table-1 {
  text-align: left;
  margin-right: 2em;
}

<div class="table-container">   
    <table class="table-1">
            <tr>
                <th>Name:</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th rowspan="2">Telephone:</th>
                <td>55577854</td>
            </tr>
    </table><br><br>
    <table class="table-1">
            <tr>
                <th>Name:</th>
                <td>Bill Gates</td>
            </tr>
            <tr>
                <th rowspan="2">Telephone:</th>
                <td>55577854</td>
            </tr>
        </table>
</div>

Answer 3

您如何看待这个？

table th, td {
    text-align: left;
}
.name, .phone {
  font-weight: bold;
}
.space {
  width: 10px;
}

<table>
  <tr>
  <td class="name">Name:</td>
  <td>Bill Gates</td>
  <td class="space"></td>
  <td class="name">Name:</td>
  <td>Bill Gates</td>
  </tr>
   <tr>
  <td class="phone">Telephone:</td>
  <td>Bill Gates</td>
  <td class="space"></td>
  <td class="phone">Telephone:</td>
  <td>Bill Gates</td>
  </tr>
</table>

Answer 4

添加到CSS'.table-1 {display：inline-block;}' 这不是最好的选择，但你可以在几秒内解决它：

<style>
.table-1 th, td {
    text-align: left;

}
.table-1 {
    display:inline-block;
    }
</style>

<table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
 </table>
 <table class="table-1">
        <tr>
            <th>Name:</th>
            <td>Bill Gates</td>
        </tr>
        <tr>
            <th rowspan="2">Telephone:</th>
            <td>55577854</td>
        </tr>
  </table>

Answer 5

即使有一个已接受的答案，我想在没有<table>的情况下显示这样做，因为我认为这些事情是而不是表，它们是目录条目。

这显示了一个“条目清单”，其中包含多个条目“条目”，每个条目包含“名称”和“电话”。标签不重复，它们是通过CSS :before内容生成添加的类用于描述每个的内容，而不是它的外观。

可以使用flex布局样式控制每行的条目数。

.entrylist {
  display: flex;
}
.entry {
  margin-right: 1em;
  padding: 3px 0.4em;
  background-color: lightgreen;
}
.entry .name, .entry .phone {
  display: block;
  white-space: nowrap;
}
.entry *:before {
  display: inline-block;
  width: 10ex;
  margin-right: 0.5em;
}
.entry .name:before {
  content: 'Name:';
}
.entry .phone:before {
  content: 'Telephone:';
}

<div class="entrylist">
  <div class="entry">
    <span class="name">Bill Gates</span>
    <span class="phone">55577854</span>
  </div>
  <div class="entry">
    <span class="name">Steve Jobs</span>
    <span class="phone">55533987</span>
  </div>
  <div class="entry">
    <span class="name">Elon Musk</span>
    <span class="phone">55599123</span>
  </div>
</div>

创建包含2行的HTML表

5 个答案: