表CSS寬度由跨度屬性

在創建表表CSS寬度由跨度屬性

table-layout: fixed;

打破，它消耗100％的寬度。然後，您嘗試創建4列（10％，10％，40％，40％）

但是，某些行只有2列長，因此我們使用colspan="2"，但這會打破預定義的寬度值並均勻分配所有內容。

我目前的解決方案是在td標記中嵌套表格。

有沒有更好的方法來做到這一點，或停止colspan打破我的寬度？

，打破一個簡單的2列的例子是以下：

編輯：CODE更新了一個更好的例子的代碼。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
    <style> 
    table { 
    table-layout: fixed; 
    } 
    </style>  
</head> 
<body> 
<table style="width: 100%"> 
    <caption>Table of Contents</caption> 
    <tbody> 
    <tr> 
     <td style="width: 5%;"> 
     <div>1</div> 
     </td> 
     <td style="width: 95%;" colspan="2"> 
     <div>Chapter Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div></div> 
     </td> 
     <td style="width: 5%;"> 
     <div>a)</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Section Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div></div> 
     </td> 
     <td style="width: 5%;"> 
     <div>a)</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Section Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div>2</div> 
     </td> 
     <td style="width: 5%;"> 
     <div>-</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Chapter Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div>3</div> 
     </td> 
     <td style="width: 5%;"> 
     <div>-</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Chapter Name</div> 
     </td> 
    </tr> 
    </tbody> 
</table> 
</body> 
</html>

用解決

HTML

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta name="viewport" content="width=device-width"> 
    <title>JS Bin</title> 
</head> 
<body> 
<table style="width: 100%"> 
    <colgroup> 
    <col class="short" /> 
    <col class="short" /> 
    <col class="long" /> 
    </colgroup> 
    <tr> 
     <td colspan="3"> 
     <div>Table of Contents</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div>1</div> 
     </td> 
     <td style="width: 95%;" colspan="2"> 
     <div>Chapter Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div></div> 
     </td> 
     <td style="width: 5%;"> 
     <div>a)</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Section Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div></div> 
     </td> 
     <td style="width: 5%;"> 
     <div>a)</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Section Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td style="width: 5%;"> 
     <div>2</div> 
     </td> 
     <td style="width: 5%;"> 
     <div>-</div> 
     </td> 
     <td style="width: 90%;"> 
     <div>Chapter Name</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
     <div>3</div> 
     </td> 
     <td> 
     <div>-</div> 
     </td> 
     <td> 
     <div>Chapter Name</div> 
     </td> 
    </tr> 
</table> 
</body> 
</html>

CSS

table { 
    table-layout: fixed; 
} 
.short { 
    width: 5%; 
} 
.long { 
    width: 90%; 
}

已更新

來源

2016-03-01 codeCompiler77

這裏有一個解決方案：https://stackoverflow.com/a/17832737/4861854

您可以通過創建一個COLGROUP解決您的問題：

<table style="width: 100%"> 
    <colgroup> 
     <col class="short" /> 
     <col class="long" /> 
    </colgroup> 
    <tr> 
     <td colspan="2"> 
      <div style="font-size: 300%;">Table of Contents</div> 
     </td> 
    </tr> 
    <tr> 
     <td> 
      <div>1</div> 
     </td> 
     <td> 
      <div>2</div> 
     </td> 
    </tr> 
</table>

然後你樣式類。長和。總之像你想：

.short { 
    width: 5%; 
} 
.long { 
    width: 95%; 
}

這裏是小提琴：https://jsfiddle.net/t9qwfs7L/

來源

2016-03-01 20:28:12

這是偉大的謝謝！ – codeCompiler77

你有沒有使用caption tag考慮？

caption元素在語義上被定義爲表格的標題（這是您正在嘗試執行的操作）並且自從至少HTML 3.2以來一直可用。它與所有瀏覽器版本兼容，包括IE6。你可以用CSS來設計風格，以達到&的效果。

html * 
 
{ 
 
    font-size: 98%; 
 
    color: #000; 
 
    font-family: Arial !important; 
 
} 
 

 
table { 
 
    table-layout: fixed; 
 
} 
 

 
table caption { 
 
    font-size: 300%; 
 
} 
 

 
th, td { 
 
    padding: 15px; 
 
    word-break: break-all; 
 
}

<table style="width: 100%"> 
 
    <caption>Table of Contents</caption> 
 
    <tbody> 
 
    <tr> 
 
     <td style="width: 5%;"> 
 
     <div>1</div> 
 
     </td> 
 
     <td style="width: 95%;"> 
 
     <div>Name</div> 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

來源

2016-03-01 20:15:58 JDB

是的，我已經請參閱更新以上。內容表有章節和章節和小節。我正在使用'colspan'進行格式化。 – codeCompiler77

謝謝你的幫助隊友:) – codeCompiler77

有沒有你不能簡單地指定，而不是使用 table { width: 100%; }任何理由？

html * 
{ 
    font-size: 98%; 
    color: #000; 
    font-family: Arial !important; 
} 
table { 
    width:100%; 
} 

th, td { 
    padding: 15px; 
    word-break: break-all; 
    background:#ccc; 
}

https://jsfiddle.net/L05v6s8z/

來源

2016-03-01 20:16:16

長文字的溢出打破了縮放和單詞破解本身並沒有解決它。佈局必須修復:(來自這個問題[鏈接]（http://stackoverflow.com/questions/35713128/css-is-not-being-aplied-maybe-due-to-characters-not-being-逃脫） – codeCompiler77

表CSS寬度由跨度屬性

回答

相關問題