HTML表格列寬度練習

在表格中選擇列寬時有什麼好的做法？比方說，我有四列，名稱（可變寬度），描述（文本的長內容），計數（最多3個字符），日期（固定格式）。HTML表格列寬度練習

這將是一個好的做法？我想着descr。，count和width的固定寬度（因此實際上也使得名稱「固定」寬度）。但我真正的問題是，如何選擇特定的寬度尺寸。例如，如果日期格式是yyyy-MM-dd，有一些技巧將這10個字符轉換爲一個寬度，這將確保在任何使用任何字體和字體大小的瀏覽器中顯示正常（也不會佔用任何過多空間）？

編輯：隨着固定我的意思是「相對像素的固定量的字體寬度」

來源

2010-10-08 icanBany1

您可以使用EM作爲度量單位，這將保證你將有足夠的空間，但可能會爲您提供更多的比你所需要的。 – 2010-10-08 16:22:04

我想像固定數量的像素相對於字體寬度意味着em，正如Kevin Wiskia所評論的那樣，但我個人發現修復像素是一個壞主意（當涉及到寬度時（儘管它對高度有好處）。原因是你不知道用戶屏幕的寬度。讓我們假設你的桌子只需要500個像素，但用戶有一個1920×1080的屏幕。這意味着您的桌子現在佔用屏幕寬度的25％以下。然而，使用我的方法，您可以佔用屏幕的75％，並將每列列爲該75％的特定百分比。 – ClarkeyBoy 2010-10-09 16:40:10

@ClarkeyBoy，好點。也許那麼一個好的解決方案是將表格寬度指定爲75％，並使用空格指定單個列/單元格：使用字體大小爲em的nowrap？然後，列將佔用盡可能多的空間（沒有多餘的空間），即使在1920x1080時也不會看起來很小。 – icanBany1 2010-10-09 17:56:25

一個類似於您可以對所有要舒展，因爲他們需要儘可能多的不使用額外的空間細胞申報white-space: nowrap;（名稱，日期，數量），然後簡單地給你的剩餘單元格100％的寬度。這樣100％寬的細胞將盡可能地擴大，而不會導致其他細胞在多條細胞繫上崩潰。

來源

2010-10-08 16:34:36

如果你想自己節省大量的標記......

首先，如果固定寬度你的意思是一個固定的百分比，以下內容添加到您的樣式表：

.width1 { 
    width: 1%; 
} 
.width2 { 
    width: 2%; 
} 
.width99 { 
    width: 99%; 
} 
.width100 { 
    width: 100%; 
}

這給你如果你願意，如果你決定爲它們中的任何一個應用一個奇數的百分比寬度，你需要的靈活性 - 例如，其中一個寬度爲23，另一個寬度爲27。

現在這是聰明的一點。使用col標籤，您可以僅應用一次寬度，而不是在每個單元上應用寬度。我知道你可以將寬度應用到第一行，並且他們將在每隔一行設置相同單元格的寬度 - 但col標籤也可用於設置其他屬性。例如：

<table class="width100"> 
    <col class="width15" style="background-color: #cccccc;" /> 
    <col class="width65" /> 
    <col class="width10" /> 
    <col class="width10" /> 
    <tr> 
     <td>My Sample Name</td> 
     <td>My Sample Long Description</td> 
     <td>5</td> 
     <td>2010-Oct-08</td> 
    </tr> 
</table>

我通常喜歡使用這種技術 - 但如果它是一個佈局我將使用多個表（例如，客戶表可以是佈局的代理商表相同），那麼我將爲每一列創建一個類並設置該類的寬度等。然後我會將相關課程應用於每個單元格。我想這兩種方法都可以合併 - 相關的類可以應用到相關的列，但是屬性設置在一個地方（樣式表）的事實意味着你只需要在一次地方改變它。

希望這可以幫助，這是你在找什麼。

理查德

來源

2010-10-08 16:34:54 ClarkeyBoy

什麼與downvote？它與這個問題完全相關，並且是一個非常快速的解決方案...我希望它是強制性的人們說爲什麼他們downvoted ... – ClarkeyBoy 2010-10-08 16:56:48

可能是因爲它增加了很多多餘的代碼到你的CSS需要轉移到客戶。它是非語義的。而標籤不能100％正常工作。 – 2010-10-08 19:58:20

但是它幾乎不影響加載頁面的速度 - 我個人並不特別在乎我的網站需要下載多少代碼 - 如果我可以在我的計算機上快速加載它們（最大寬帶速度爲每秒50kb），那麼接近足夠的人能夠。如果它在我的機器上快速加載，那麼我很高興。 – ClarkeyBoy 2010-10-08 20:03:19

HTML表格列寬度練習

回答

相關問題