CSS表格列宽不均匀
[英]CSS table column width uneven
问题描述
嗨，我是html的新手，我在表格中创建偶数列宽度时遇到了困难，我尝试修改宽度的几种方法，包括将td和th值设置为50％但是在右边留下一个大的空白区域。 关于我出错的地方的任何指示都将非常感激！ 非常感谢！
下面的片段：
/*page content container*/ .content{ position:relative; overflow: hidden; background-color:#424242; width:100%; height:600px; margin:0; padding:0; } /*contents tables formating*/ .contenttbl { margin-top:10px; margin-bottom:10px; margin-left:auto; margin-right:auto; border-collapse:collapse; border:1px solid black; } .contenttbl td,th { text-align:center; vertical-align:center; border: 1px solid #ddd; padding:5px; margin-left:auto; margin-right:auto; width:100%; } .contenttbl th{ background-color:#ee3124 ; color:white; } tr:hover {background-color: #f2f2f2;}
<div class="conent"> <div class="contenttbl"> <table> <thead> <tr> <th>title1</th> <th>title2</th> </tr> </thead> <tbody> <tr> <td>row 1 column 1</td> <td>row 1 column 2</td> </tr> <tr> <td>row 2 column 2</td> <td>row 2 column 2</td> </tr> <tr> <td>row 3 column 2</td> <td>row 3 column 2</td> </tr> </tbody> </table> </div> </div>
4 个解决方案
解决方案1
0 2019-06-09 13:16:40
我加入width:100%为table和width:50%为td ， th
/*page content container*/ .content{ position:relative; overflow: hidden; background-color:#424242; width:100%; height:600px; margin:0; padding:0; } /*contents tables formating*/ .contenttbl { margin-top:10px; margin-bottom:10px; margin-left:auto; margin-right:auto; border-collapse:collapse; border:1px solid black; } table { width:100%; } .contenttbl td,th { text-align:center; vertical-align:center; border: 1px solid #ddd; padding:5px; margin-left:auto; margin-right:auto; width:50%; } .contenttbl th{ background-color:#ee3124 ; color:white; } tr:hover {background-color: #f2f2f2;}
<!DOCTYPE html> <html> <head> <link rel="stylesheet" type="text/CSS" href="#"> </head> <body> <!--content--> <div class="conent"> <div class="contenttbl"> <table> <thead> <tr> <th>title1</th> <th>title2</th> </tr> </thead> <tbody> <tr> <td>row 1 column 1</td> <td>row 1 column 2</td> </tr> <tr> <td>row 2 column 2</td> <td>row 2 column 2</td> </tr> <tr> <td>row 3 column 2</td> <td>row 3 column 2</td> </tr> </tbody> </table> </div> </div> </body> </html>
解决方案2
0 2019-06-09 13:26:07
你的代码不起作用的原因是你有一个关于HTML代码的拼写错误。
<div class =“conent”>
您的CSS也可以作为此示例进行修剪。
此外，Codepen是概述的重要资产。 https://codepen.io/anon/pen/XwvLbv
/*page content container*/ .content{ position:relative; overflow: hidden; background-color:#424242; width:100%; } /*contents tables formating*/ .contenttbl { border:1px solid black; } table { width:100%; } .contenttbl td,th { text-align:center; border: 1px solid #ddd; padding:5px; width:50%; } .contenttbl th{ background-color:#ee3124; color:white; } tr:hover {background-color: #f2f2f2;}
<!--content--> <div class="content"> <div class="contenttbl"> <table> <thead> <tr> <th>title1</th> <th>title2</th> </tr> </thead> <tbody> <tr> <td>row 1 column 1</td> <td>row 1 column 2</td> </tr> <tr> <td>row 2 column 2</td> <td>row 2 column 2</td> </tr> <tr> <td>row 3 column 2</td> <td>row 3 column 2</td> </tr> </tbody> </table> </div> </div>
解决方案3
0 2019-06-09 13:37:32
我刚刚将以下内容添加到.css中：
.contenttbl table {
width: 100%;
}
无需强制td到特定宽度，这将适用于所有.contenttbl表，无论您放入哪些列数。 它只会影响.contenttbl表，而不会影响您网站上的所有表。
解决方案4
0 2019-06-10 06:53:35
从td中删除with，这样你就是单元格的风格
.contenttbl td,th {
text-align:center;
vertical-align:center;
border: 1px solid #ddd;
padding:5px;
margin-left:auto;
margin-right:auto;
}
添加以下内容
table{
width:100%;
table-layout:fixed
}
将表格列的宽度与固定宽度表格（HTML / CSS）中的文本匹配
[英]Matching the width of a table column to text in a fixed width table (HTML/CSS)
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.