如何将表格宽度强制到容器的宽度?

时间:2021-02-11 17:14:18

I have a table:

我有一张桌子:

如何将表格宽度强制到容器的宽度?

Here is how I created it : jsFiddle

以下是我创建它的方法:jsFiddle

I've tried this in my CSS :

我在我的CSS中试过这个:

table{
    width:100%;
}

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 &nbsp; 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 &nbsp; 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 &nbsp; 6.EE.4</td>
                    <td>www.bigideamath.com</td>
                </tr>
            </tbody>
        </table>
    </div>
</body>

It doesn't seem to work.

它似乎不起作用。

2 个解决方案

#1


2  

The table's padding was causing the space around the container . By removing the padding the table was then flush with the container. The table also had a margin bottom which again , created a space between the table and the container..

表的填充导致容器周围的空间。通过移除衬垫,然后将桌子与容器齐平。该表还有一个边缘底部,再次在桌子和容器之间创建了一个空间。

.container {
   padding:0;
}
.table{
   margin-bottom:0;
}

https://jsfiddle.net/axza8xs1/5/

#2


0  

removing the class container seems to help ;)

删除类容器似乎有帮助;)

you are using a boostrap ("container") class which does exactly what you don't want to happen, so why are you using it?

你正在使用一个boostrap(“容器”)类来完成你不想要发生的事情,所以你为什么要使用它?

#1


2  

The table's padding was causing the space around the container . By removing the padding the table was then flush with the container. The table also had a margin bottom which again , created a space between the table and the container..

表的填充导致容器周围的空间。通过移除衬垫,然后将桌子与容器齐平。该表还有一个边缘底部,再次在桌子和容器之间创建了一个空间。

.container {
   padding:0;
}
.table{
   margin-bottom:0;
}

https://jsfiddle.net/axza8xs1/5/

#2


0  

removing the class container seems to help ;)

删除类容器似乎有帮助;)

you are using a boostrap ("container") class which does exactly what you don't want to happen, so why are you using it?

你正在使用一个boostrap(“容器”)类来完成你不想要发生的事情,所以你为什么要使用它?