放置兩個帶有1

我奮力的列跨度一個標題下的細胞放在含有細胞{懶惰，狗，然後，它}相同的標題（以1:1的列跨度）放置兩個帶有1

下我已經試過在我的單元格內創建div標籤，創建2個單元格，以及我所能想到的所有可能的寬度和colspan組合。

使用div標籤和CSS的標題下，我可以偷懶，狗，但他們不是單個細胞。

<html> 
<head> 
<style> 

     table,td,tr,th{ 
      border: 1px solid black; 
      } 


      .lazy { 
      float: left; 
      width: 50%; 
      } 

      .dog { 
      float: right; 
      width: 50%; 
      } 
</style> 
</head> 
<body> 
<table> 
      <tr> 
       <th>Quick</th> 
       <th>brown fox</th> 
       <th>jumps</th> 

      </tr> 

      <tr> 
       <td rowspan=3>over the</td> 
       <td><div class="lazy">lazy</div> <div class="dog">dog</div></td> 
       <td>and</td> 
      </tr> 

      <tr> 
       <td>then</td> 
       <td>it</td> 
       <td>fall</td> 
      </tr> 

      <tr> 
       <td colspan=2> prey to a lion </td> 
      </tr> 

</table> 
</body> 
</html>

謝謝你的任何建議。

來源

2017-02-07 Qbert

添加colspan="2"到<th>brown fox</th>

你不必把DIV中<td>分離數據

然後編輯您的<td colspan=2> prey to a lion </td>

到<td colspan="3"> prey to a lion </td>

這裏工作小提琴，希望它幫助你

https://jsfiddle.net/LLa90017/1/

來源

2017-02-07 03:50:06

容易餡餅如下：

 table, td, tr, th { 
 
      border: 1px solid black; 
 
     } 
 

 

 
     .lazy { 
 
      float: left; 
 
      width: 50%; 
 
     } 
 

 
     .dog { 
 
      float: right; 
 
      width: 50%; 
 
     }

<table> 
 
     <tr> 
 
      <th>Quick</th> 
 
      <th colspan="2">brown fox</th> 
 
      <th>jumps</th> 
 

 
     </tr> 
 

 
     <tr> 
 
      <td rowspan=3>over the</td> 
 
      <td>lazy</td> 
 
      <td>dog</td> 
 
      <td>and</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td>then</td> 
 
      <td>it</td> 
 
      <td>fall</td> 
 
     </tr> 
 

 
     <tr> 
 
      <td colspan=3> prey to a lion </td> 
 
     </tr> 
 

 
    </table>

來源

2017-02-07 03:57:18

放置兩個帶有1

回答

相關問題