台面对中跨距

Question

我试图将span放在tbody中，但我不知道如何做到这一点，如果不包括tr和td元素，我不知道这个结构是否有效。

html

<table class="table">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
         <div><span>You haven’t added any data yet</span></div>
   </tbody>
</table>

css

tbody div {
  display: table-row;
}

tbody div span{
  display: block;
  text-align: center;
  width: 100%;
}

​

​

Answer 1

使用colspan：

<table class="table">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr> 
         <td colspan="3">You haven’t added any data yet</td>
      </tr>
   </tbody>
</table>

Answer 2

按照惯例，您应该在tbody中包括tr和th。

您可以使用colspan合并列，使用text-align:center样式对文本进行居中。

<table class="table" style="width:100%">
   <thead>
      <tr>
         <th>Rank</th>
         <th>
            <div>Name</div>
         </th>
         <th>
            <div>Age</div>
         </th>
         <th>Price</th>
      </tr>
   </thead>
   <tbody>
      <tr> 
         <td colspan="4" style="text-align: center;">You haven’t added any data yet</td>
      </tr>
   </tbody>
</table>