如何將html表單列顯示爲多列？

-1

我有一個簡單的桌子，有一個大柱子。我想將這些單列顯示爲多列。目前，我有一個像如下如何將html表單列顯示爲多列？

Column 
a 
a 
a 
a 
a 
a

我需要這樣的東西

 Column 
a  a  a 
a  a  a

我的代碼如下

<table>   
    <thead>Details</thead> 
     <tbody> 
     <tr> 
      <td>a</td> 
     </tr> 

     <tr> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 
     </tr> 
<tr> 
      <td>a</td> 
     </tr> 

     <tr> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 
     </tr> 
</tbody> 
</table>

我如何可以做到這一點了改變表結構？

的jsfiddle：http://jsfiddle.net/wLjmpvuz/

來源

2014-09-25 user3786942

我不明白你的問題 – 2014-09-25 20:24:35

兩行''每個人有三個單元''。這就是答案。 – 2014-09-25 20:25:21

爲每個tr增加更多的td或什麼？ http://jsfiddle.net/wLjmpvuz/1/ – 2014-09-25 20:25:25

要做到這一點不改變表結構的要求，你就需要使用CSS，防止正常的桌面顯示器，而是實現了「模擬表」。這可以通過將tr元素轉換爲浮動到左側的內嵌塊，但在每三個元素後浮動清除。這不適用於舊版本的IE。例如：

table { 
    display: block; 
} 
tr { 
    display: inline-block; 
    float: left; 
    border: solid 1px; 
    width: 4em; 
} 
td { 
    display: inline; 
} 
tr:nth-child(3n+1) { 
    clear: left; 
}

請參閱jsfiddle。請注意，這樣的模擬表格有很多限制。你不能讓瀏覽器分配列的寬度（因爲沒有真正的列）;相反，您需要設置元素寬度以創建列的印象。不能像表中那樣使相鄰的邊框塌陷，因此設置邊框更有用。

你可以讓HTML標記，而不是表結構，通過使用構造一個新的table元素，三個單元格在一行JavaScript代碼，從原始表，那時候單元格內容替換原始表新創建的一個。

來源

2014-09-25 20:43:24

那正是我在找什麼。謝謝您的幫助 – user3786942 2014-09-25 23:37:05

您的問題並不像水那樣清晰，但如果我理解你，你想有一個嵌套表

事情是這樣的：

<table>   
    <thead> 
     <th>Details</th> 
     <th>Column2 
     </th> 
    </thead> 
     <tbody> 
     <tr> 
      <td> 
       <table> 
        <tbody> 
         <tr> 
          <td>a</td> 
          <td>a</td> 
          <td>a</td> 
         </tr> 
         <tr> 
          <td>a</td> 
          <td>a</td> 
          <td>a</td> 
         </tr> 
        </tbody> 
       </table> 
      </td> 
      <td> 
       Other Column Data 
      </td> 
     </tr> 
    </tbody> 
</table>

提琴手：http://jsfiddle.net/wLjmpvuz/6/

如果您只需要一張平板表，應該沒有嵌套表：

<table>   
    <thead>Details</thead> 
     <tbody> 
     <tr> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 
      <td>a</td> 
      <td>a</td> 
     </tr> 
    </tbody></table>

提琴手：http://jsfiddle.net/wLjmpvuz/1/

來源

2014-09-25 20:29:54

爲什麼你不改變表結構？每一個都是一條新線。試試這個

<table>   
    <thead>Details</thead> 
     <tbody> 
     <tr> 
      <td>a</td> 

      <td>a</td> 

      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 

      <td>a</td> 

      <td>a</td> 
     </tr> 
     <tr> 
      <td>a</td> 

      <td>a</td> 

      <td>a</td> 
     </tr> 

    </tbody></table>

來源

2014-09-25 20:30:26

我不確定這是否能解決您的問題。 http://jsfiddle.net/wLjmpvuz/8/

<table>   
<thead>Details</thead> 
    <tbody> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
    <tr> 
     <td>a</td> 
     <td>a</td> 
     <td>a</td> 
    </tr> 
</tbody></table>

來源

2014-09-25 20:33:50

如何將html表單列顯示爲多列？

回答

相關問題