Html表格寬度與css

我有數據進來，我解析成一個網頁上的表格。有3個單元彼此並排。（Cell 0,0：Cell 0,1：Cell 0,2）Html表格寬度與css

我正在試圖使單元在div上均勻分佈，因此第一個單元格的文本左對齊，中間單元格對齊中心，最後一個單元格右對齊。

我試着對CSS

以下

td { 
 
    width: calc(100%/3); 
 
}

<table border=1 style="border: 1px red dashed; width: 250px;"> 
 
<tr> 
 
<td>first</td> 
 
<td>second with wider contents</td> 
 
<td>third</td> 
 
</tr> 
 
</table> 
 

 
<table border=1 style="border: 1px blue dashed; width: 250px;"> 
 
<tr> 
 
<td>first</td> 
 
<td>second</td> 
 
<td>third with wider contents</td> 
 
</tr> 
 
</table>

它不給我，我要找的輸出。我試圖做到的是我有一個頁面上的多個表和所需的單元格進行向下

來源

2017-05-30 Cody

歡迎堆棧溢出！ :) 你能提供一個片段嗎？ – Strernd

'width：calc（100％/ 3）;'順便說一句，你爲什麼需要'calc'？這是一個常數，操作的結果是33％，那麼爲什麼不用'width：33％'代替呢？ – BackSlash

除了一小段（和/或小提琴）之外，你能擴展你的意思嗎「不給我輸出我正在尋找」？即，你能告訴我們你在做什麼，並具體解釋結果與期望/預期結果有何不同？ – Adrian

你是否將你的表格設置爲它嵌套的div的全部寬度？

例如：

div { 
    width: 300px; 
} 

table { 
    width: 100%; 
    border: 1px solid black; 
} 


td { 
    width: calc(100%/3); 
    border: 1px solid black; 
}

剛纔提出這個快，我認爲這是你在找什麼： https://jsfiddle.net/nsxLfv00/

來源

2017-05-30 20:25:06 Jackson

這是答案，我的表沒有設置爲div的完整大小 – Cody

一路排列如果你想設置的三個單元格內容的對齊方式使用n-th child css selector

td:nth-child(1){ 
    text-align: left; 
}

以及相應的中間和右列。

來源

2017-05-30 20:21:19 Strernd

-1

儘管在純CSS中可能，但我會建議您使用Bootstrap，Flexbox或任何網格框架來輕鬆實現。在BS它會是這樣的：

<div class=container> 
    <div class="row"> 
    <div class="col-sm-4"> 
     Your first cell content 
    </div> 
    <div class="col-sm-4"> 
     second 
    </div> 
    <div class="col-sm-4"> 
     third 
    </div>  
    </div> 
</div>

你當然可以，插入你的表結構，如果你需要。

來源

2017-05-30 20:24:46 GwadaKing

對這個問題使用Bootstrap是矯枉過正的。 OP沒有表明他們使用任何CSS框架。此外，OP可能不得不學習如何使用Bootstrap，並可能花費數天而不是幾分鐘。 – amphetamachine

@amphetamachine：即使你在這一點上是對的，也沒有提到它是一個小型還是大型項目。自由職業後端開發人員在切換到前端項目時並不知道這些框架，這經常發生。嚴重的是，學習BS不像學習node.js，一旦你堅持文檔... – GwadaKing

Html表格寬度與css

回答

相關問題