特定列的 HTML 定位數據左對齊
[英]HTML positioning data at specific columns left aligned
問題描述
請幫助我從特定列開始對齊表格中的數據並左對齊。
所有數據都需要在所示的 3 個特定列中左對齊，並且應該包裝任何未對齊的數據。
請參閱下面的當前代碼。
我怎樣才能改變這個？
我想在表中配置以下內容：
- 第 1 列最多為 10 個字符。
- 第 2 列最多 50 個字符。
- 第 3 列最多 10 個字符。
- 全部左對齊。
- 並且插入到上述字符之外的任何數據都應該換行。
body { background-color: powderblue; } code { background: #2db34a; border-radius: 6px; color: #fff; display: block; font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; padding: 24px 15px; text-align: center; } header, section, aside, footer { margin: 0 1.5% 24px 1.5%; } section { float: left; width: 30%; } footer { clear: both; margin-bottom: 0; }
<h1>This is a heading</h1> <p>This is a paragraph.</p> <table> <tr> <th><a href="#">Code</a></th> <th><a href="#">Description</a></th> <th><a href="#">Quantity</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> <tr> <th><a href="#">123245</a></th> <th><a href="#">This is a description of item 1</a></th> <th><a href="#">100</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> <tr> <th><a href="#">678910111213</a></th> <th><a href="#">This is a description of item 2 and it is longer than description 1</a></th> <th><a href="#">1000</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> </table>
提前感謝您提供的任何幫助。
4 個解決方案
解決方案1
0 2022-06-29 13:45:34
你可以看看 table-layout 和 vertical-align 屬性。
可能的例子：
body { background-color: powderblue; } table { table-layout: fixed; text-align: left; border-spacing:0.5em; } tr>* { max-width: 10ch; word-break: break-all; vertical-align:top; } tr>*:nth-child(2) { max-width: 50ch; }
<h1>This is a heading</h1> <p>This is a paragraph.</p> <table> <tr> <th><a href="#">Code</a></th> <th><a href="#">Description</a></th> <th><a href="#">Quantity</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> <tr> <th><a href="#">123245</a></th> <th><a href="#">This is a description of item 1</a></th> <th><a href="#">100</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> <tr> <th><a href="#">678910111213</a></th> <th><a href="#">This is a description of item 2 and it is longer than description 1</a></th> <th><a href="#">1000</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> </table>
解決方案2
0 已采納 2022-06-29 13:51:01
我添加了一些 CSS 來完成這項工作：
th {
text-align: left;
}
tr a {
display: block;
word-wrap: break-word;
}
tr th:nth-child(1) a {
width: 10ch;
}
tr th:nth-child(2) a {
width: 42ch; // Adjusted
}
tr th:nth-child(3) a {
width: 10ch;
}
基於0字形寬度的ch 單元並不完美，這就是 CSS 代碼中 50 個字符的限制實際上是42ch的原因。
body {background-color: powderblue;} code { background: #2db34a; border-radius: 6px; color: #fff; display: block; font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier; padding: 24px 15px; text-align: center; } header, section, aside, footer { margin: 0 1.5% 24px 1.5%; } section { float: left; width: 30%; } footer { clear: both; margin-bottom: 0; } th { text-align: left; } tr a { display: block; word-wrap: break-word; } tr th:nth-child(1) a { width: 10ch; } tr th:nth-child(2) a { width: 42ch; // Adjusted } tr th:nth-child(3) a { width: 10ch; }
<!DOCTYPE html> <html> <head> </head> <body> <h1>This is a heading</h1> <p>This is a paragraph.</p> <table> <tr> <th><a href="#">Code</a></th> <th><a href="#">Description</a></th> <th><a href="#">Quantity</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> <tr> <th><a href="#">Thisis10ch</a></th> <th><a href="#">This is an easy good nice well 50 character string</a></th> <th><a href="#">100</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> <tr> <th><a href="#">Thisis10ch wrapped</a></th> <th><a href="#">This is an easy good nice well 50 character string wrapped</a></th> <th><a href="#">1000</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> </table> </body> </html>
解決方案3
0 2022-06-29 13:57:11
一種方法如下：
body { background-color: powderblue; } /* to allow the browser to split words at any point when required to allow for a line-break: */ td { word-break: break-all; } /* selecting any element that is a <th> or a <td> that does not match the '.right' selector: */ :is(th, td):not(.right) { /* aligning text to the logical inline start, in a left-to-right language (such as English) that is equivalen to 'text-align: left': */ text-align: start; } /* selecting all <th> and <td> elements that are the :first-child, or the :nth-child(3), of it's/their parent: */ :is(th, td):is(:first-child, :nth-child(3)) { /* there are no CSS sizes exactly equal to '1 character' as characters vary enormously in their sizing; the 'ex' unit is equal to the width of the lower-case 'x' character, which allows for a near-match on average to 10 characters wide (though ch is another option): */ max-width: 10ex; } /* selecting all <th> and <td> elements that are the second- child of their parent: */ :is(th, td):nth-child(2) { /* setting the width to 50ex, the width of 50 lowercase 'x' characters to approximate a 50 character length: */ max-width: 50ex; }
<h1>This is a heading</h1> <p>This is a paragraph.</p> <table> <thead> <tr> <th><a href="#">Code</a></th> <th><a href="#">Description</a></th> <th><a href="#">Quantity</a></th> <th class="right"><a href="#">Item 4</a></th> </tr> </thead> <tbody> <tr> <td><a href="#">123245</a></td> <td><a href="#">This is a description of item 1</a></td> <td><a href="#">100</a></td> <td class="right"><a href="#">Item 4</a></td> </tr> <tr> <td><a href="#">678910111213</a></td> <td><a href="#">This is a description of item 2 and it is longer than description 1</a></td> <td><a href="#">1000</a></td> <td class="right"><a href="#">Item 4</a></td> </tr> </tbody> </table>
參考：
- CSS 值和單位：長度。
-
:first-chil。 -
:is。 -
:not()。 -
:nth-child()。 -
text-align。 -
word-break。
解決方案4
0 2022-06-29 14:19:46
您可以從這里構思並嘗試學習 HTML 表格。 這是一件非常重要的事情。
HTML：
<table>
<thead>
<tr>
<th><a href="#">Code</a></th>
<th><a href="#">Description</a></th>
<th><a href="#">Quantity</a></th>
<th><a href="#">Item 4</a></th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="#">123245</a>
<td><a href="#">This is a hello world description of item 1</a></td>
<td><a href="#">10045467643456457647345456363653</a></td>
<td><a href="#">Item 4</a></td>
</tr>
<tr>
<td><a href="#">5463463</a>
<td><a href="#">Visitors will now see your public and anonymized private
contributions.
Visitors will now see your public and anonymized private contributions.
</a></td>
<td><a href="#">1004546764345645764734</a></td>
<td><a href="#">Hello test 4</a></td>
</tr>
</tbody>
</table>
CSS：
body {
background-color: powderblue;
}
table * {
text-align: left;
word-break: break-all;
}
table thead th:first-child,
table tbody tr td:first-child {
width: 50px;
}
table thead th:nth-child(1) {
width: 200px;
}
table thead th:nth-child(2) {
width: 200px;
}
table thead th:nth-child(3) {
width: 200px;
}
table thead th:last-child,
table tbody td:last-child {
width: 100px;
text-align: right;
}
將對齊的導航箭頭垂直居中放置在圖像的左右兩側
[英]Positioning vertically center aligned navigation arrows to the left and right of an image
HTML 當對齊不起作用時，如何從左到右更改對齊？
[英]HTML How to change aligned from left to the right, when aligned not working?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.