如何将表格宽度强制到容器的宽度？
我有一张桌子：
以下是我创建它的方式：jsFiddle
我在我的CSS中试过这个：
table{
width:100%;
}
＆＃13;
＆＃13;
＆＃13;
＆＃13;
td span {
float:right;
width:20%;
text-align:center;
}
td {
text-align: center;
}
td:nth-child(1) {
text-align: left;
}
th {
text-align: center;
background-color: black;
color: white;
}
.progress_type2 .progressbar {
height: 16px;
border-radius: 10px;
}
.progress_type2 .progressbar.colorblue {
box-shadow: 0 1px 0 #5e91b7, 0 -1px 0 #5e91b7, 1px 0 0 #5e91b7, -1px 0 0 #5e91b7, inset 0 1px 0 rgba(255, 255, 255, .4);
}
.progress_type2 .progressbar.colorgreen {
box-shadow: 0 1px 0 #699847, 0 -1px 0 #699847, 1px 0 0 #699847, -1px 0 0 #699847, inset 0 1px 0 rgba(255, 255, 255, .4);
}
.progress_type2 .progressbar.colororange {
box-shadow: 0 1px 0 #a27132, 0 -1px 0 #a27132, 1px 0 0 #a27132, -1px 0 0 #a27132, inset 0 1px 0 rgba(255, 255, 255, .4);
}
.progress_type2 .progressbar.colorpink {
box-shadow: 0 1px 0 #7b3b65, 0 -1px 0 #7b3b65, 1px 0 0 #7b3b65, -1px 0 0 #7b3b65, inset 0 1px 0 rgba(255, 255, 255, .4);
}
.progress_type2 .progressbar.colorgrey {
box-shadow: 0 1px 0 #747474, 0 -1px 0 #747474, 1px 0 0 #747474, -1px 0 0 #747474, inset 0 1px 0 rgba(255, 255, 255, .4);
}
.progress_type2 .progressbar.colorred {
box-shadow: 0 1px 0 #7b3b65, 0 -1px 0 #7b3b65, 1px 0 0 #7b3b65, -1px 0 0 #7b3b65, inset 0 1px 0 rgba(255, 255, 255, .4);
}
/* These classes are used by Types 1-7 */
.colorblue {
background: #8cd7f7;
background: -moz-linear-gradient(top, #8cd7f7 0%, #56bff3 100%);
/* Firefox 3.6+ */
background: -webkit-linear-gradient(top, #8cd7f7 0%, #56bff3 100%);
/* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #8cd7f7 0%, #56bff3 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #8cd7f7 0%, #56bff3 100%);
/* IE 10+ */
background: linear-gradient(top, #8cd7f7 0%, #56bff3 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cd7f7', endColorstr='#56bff3', GradientType=0);
/* IE6-9 */
}
.colorgreen {
background: #b0ea77;
background: -moz-linear-gradient(top, #b0ea77 0%, #80de49 100%);
/* Firefox 3.6+ */
background: -webkit-linear-gradient(top, #b0ea77 0%, #80de49 100%);
/* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #b0ea77 0%, #80de49 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #b0ea77 0%, #80de49 100%);
/* IE 10+ */
background: linear-gradient(top, #b0ea77 0%, #80de49 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#8cd7f7', endColorstr='#80de49', GradientType=0);
/* IE6-9 */
}
.colororange {
background: #ffb62c;
background: -moz-linear-gradient(top, #ffb62c 0%, #ff8a1c 100%);
/* Firefox 3.6+ */
background: -webkit-linear-gradient(top, #ffb62c 0%, #ff8a1c 100%);
/* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #ffb62c 0%, #ff8a1c 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffb62c 0%, #ff8a1c 100%);
/* IE 10+ */
background: linear-gradient(top, #ffb62c 0%, #ff8a1c 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffb62c', endColorstr='#ff8a1c', GradientType=0);
/* IE6-9 */
}
.colorpink {
background: #e578be;
background: -moz-linear-gradient(top, #e578be 0%, #d54a96 100%);
/* Firefox 3.6+ */
background: -webkit-linear-gradient(top, #e578be 0%, #d54a96 100%);
/* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #e578be 0%, #d54a96 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #e578be 0%, #d54a96 100%);
/* IE 10+ */
background: linear-gradient(top, #e578be 0%, #d54a96 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#e578be', endColorstr='#d54a96', GradientType=0);
/* IE6-9 */
}
.colorred {
background: #db2713;
background: -moz-linear-gradient(top, #db2713 0%, #d54a4a 100%);
/* Firefox 3.6+ */
background: -webkit-linear-gradient(top, #db2713 0%, #d54a4a 100%);
/* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #db2713 0%, #d54a4a 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #db2713 0%, #d54a4a 100%);
/* IE 10+ */
background: linear-gradient(top, #db2713 0%, #d54a4a 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#db2713', endColorstr='#d54a4a', GradientType=0);
/* IE6-9 */
}
.colorgrey {
background: #cbcbcb;
background: -moz-linear-gradient(top, #cbcbcb 0%, #ababab 100%);
/* Firefox 3.6+ */
background: -webkit-linear-gradient(top, #cbcbcb 0%, #ababab 100%);
/* Chrome 10+, Safari 5.1+ */
background: -o-linear-gradient(top, #cbcbcb 0%, #ababab 100%);
/* Opera 11.10+ */
background: -ms-linear-gradient(top, #cbcbcb 0%, #ababab 100%);
/* IE 10+ */
background: linear-gradient(top, #cbcbcb 0%, #ababab 100%);
/* W3C */
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cbcbcb', endColorstr='#ababab', GradientType=0);
/* IE6-9 */
}
.width_0 {
width: 0% !important;
}
.width_10 {
width: 10% !important;
}
.width_20 {
width: 20% !important;
}
.width_30 {
width: 30% !important;
}
.width_40 {
width: 40% !important;
}
.width_50 {
width: 50% !important;
}
.width_60 {
width: 60% !important;
}
.width_70 {
width: 70% !important;
}
.width_80 {
width: 80% !important;
}
.width_90 {
width: 90% !important;
}
.width_100 {
width: 100% !important;
}
.width_1 {
width: 1% !important;
}
.width_11 {
width: 11% !important;
}
.width_21 {
width: 21% !important;
}
.width_31 {
width: 31% !important;
}
.width_41 {
width: 41% !important;
}
.width_51 {
width: 51% !important;
}
.width_61 {
width: 61% !important;
}
.width_71 {
width: 71% !important;
}
.width_81 {
width: 81% !important;
}
.width_91 {
width: 91% !important;
}
.width_2 {
width: 2% !important;
}
.width_12 {
width: 12% !important;
}
.width_22 {
width: 22% !important;
}
.width_32 {
width: 32% !important;
}
.width_42 {
width: 42% !important;
}
.width_52 {
width: 52% !important;
}
.width_62 {
width: 62% !important;
}
.width_72 {
width: 72% !important;
}
.width_82 {
width: 82% !important;
}
.width_92 {
width: 92% !important;
}
.width_3 {
width: 3% !important;
}
.width_13 {
width: 13% !important;
}
.width_23 {
width: 23% !important;
}
.width_33 {
width: 33% !important;
}
.width_43 {
width: 43% !important;
}
.width_53 {
width: 53% !important;
}
.width_63 {
width: 63% !important;
}
.width_73 {
width: 73% !important;
}
.width_83 {
width: 83% !important;
}
.width_93 {
width: 93% !important;
}
.width_4 {
width: 4% !important;
}
.width_14 {
width: 14% !important;
}
.width_24 {
width: 24% !important;
}
.width_34 {
width: 34% !important;
}
.width_44 {
width: 44% !important;
}
.width_54 {
width: 54% !important;
}
.width_64 {
width: 64% !important;
}
.width_74 {
width: 74% !important;
}
.width_84 {
width: 84% !important;
}
.width_94 {
width: 94% !important;
}
.width_5 {
width: 5% !important;
}
.width_15 {
width: 15% !important;
}
.width_25 {
width: 25% !important;
}
.width_35 {
width: 35% !important;
}
.width_45 {
width: 45% !important;
}
.width_55 {
width: 55% !important;
}
.width_65 {
width: 65% !important;
}
.width_75 {
width: 75% !important;
}
.width_85 {
width: 85% !important;
}
.width_95 {
width: 95% !important;
}
.width_6 {
width: 6% !important;
}
.width_16 {
width: 16% !important;
}
.width_26 {
width: 26% !important;
}
.width_36 {
width: 36% !important;
}
.width_46 {
width: 46% !important;
}
.width_66 {
width: 66% !important;
}
.width_66 {
width: 66% !important;
}
.width_76 {
width: 76% !important;
}
.width_86 {
width: 86% !important;
}
.width_96 {
width: 96% !important;
}
.width_7 {
width: 7% !important;
}
.width_17 {
width: 17% !important;
}
.width_27 {
width: 27% !important;
}
.width_37 {
width: 37% !important;
}
.width_47 {
width: 47% !important;
}
.width_57 {
width: 57% !important;
}
.width_67 {
width: 67% !important;
}
.width_77 {
width: 77% !important;
}
.width_87 {
width: 87% !important;
}
.width_97 {
width: 97% !important;
}
.width_8 {
width: 8% !important;
}
.width_18 {
width: 18% !important;
}
.width_28 {
width: 28% !important;
}
.width_38 {
width: 38% !important;
}
.width_48 {
width: 48% !important;
}
.width_58 {
width: 58% !important;
}
.width_68 {
width: 68% !important;
}
.width_78 {
width: 78% !important;
}
.width_88 {
width: 88% !important;
}
.width_98 {
width: 98% !important;
}
.width_9 {
width: 9% !important;
}
.width_19 {
width: 19% !important;
}
.width_29 {
width: 29% !important;
}
.width_39 {
width: 39% !important;
}
.width_49 {
width: 49% !important;
}
.width_59 {
width: 59% !important;
}
.width_69 {
width: 69% !important;
}
.width_79 {
width: 79% !important;
}
.width_89 {
width: 89% !important;
}
.width_99 {
width: 99% !important;
}
<style type="text/css">[dir='rtl'] .slick-next {
right: auto;
left: -25px;
}
[dir='rtl'] .slick-prev {
right: -25px;
left: auto;
}
[dir='rtl'] .slick-next:before {
font-family: FontAwesome;
color: black;
content:"\f137";
}
[dir='rtl'] .slick-prev:before {
font-family: FontAwesome;
color: black;
content:"\f138";
}
.slick-next {
right: 10px;
}
.slick-prev {
left: 250px;
}
.slick-next:before {
font-family: FontAwesome;
color: black;
content:"\f138";
}
.slick-prev:before {
font-family: FontAwesome;
color: black;
content:"\f137";
}
.progress_type2 {
height: 16px;
padding: 1px;
background: #ddd;
box-shadow: 0 1px 0 rgba(255, 255, 255, .6), inset 0 1px 1px rgba(0, 0, 0, .15);
border-radius: 10px;
width:80%;
float:left;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<body style="background-color:#333333;">
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<div class="container" style="background-color:white;">
<br>
<table class="table table-hover table-bordered">
<thead class="text-center ">
<th width="300">Objective</th>
<th width="300">Mastery</th>
<th width="100">Standards</th>
<th width="160">Remediation</th>
</thead>
<tbody id="table">
<tr>
<td>Use the distribute Property to produce equivalent</td>
<td>
<div width="270" class="progress_type2">
<div class="progressbar colorgreen width_95"></div>
</div><span width="30">95%</span>
</td>
<td>6.EE.3 6.EE.4</td>
<td>www.bigideamath.com</td>
</tr>
<tr>
<td>Apply properties of operations to add and substract linear expressions</td>
<td>
<div width="270" class="progress_type2">
<div class="progressbar colorgreen width_80"></div>
</div><span width="30">80%</span>
</td>
<td>6.EE.3 6.EE.4</td>
<td>www.bigideamath.com</td>
</tr>
<tr>
<td>Apply properties of operations to simply algebraic expressions</td>
<td>
<div width="270" class="progress_type2">
<div class="progressbar colorgreen width_95"></div>
</div><span width="30">95%</span>
</td>
<td>6.EE.3 6.EE.4</td>
<td>www.bigideamath.com</td>
</tr>
</tbody>
</table>
</div>
</body>
它似乎无法奏效。
2 个答案:
答案 0 :(得分：2)
表的填充导致容器周围的空间。通过移除衬垫，然后将桌子与容器齐平。该表还有一个边距底部，再次在表格和容器之间创建了一个空间..
.container {
padding:0;
}
.table{
margin-bottom:0;
}
答案 1 :(得分：0)
删除班级container似乎有所帮助;）
你正在使用一个引导程序（“容器”）类，它正是你不想要发生的那个，所以你为什么要使用它？
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？