Question

我想控制由class class =＆＃34; ctrl-EASI＆＃34;标识的两个TH列的宽度。和class =＆＃34; ctrl-solution＆＃34;。目前他们已经融入了班级目标状态＆＃39;并以50％/ 50％的比例平均分配。我希望第一列的宽度为30％，第二列的宽度为70％。

＆＃13;

.target-state{
    width: 30%;
    text-align: center;
    border-right: 2px solid #fff;
    color: #f1f8ff;
    height: 40px;
}

＆＃13;

     <thead class="ctrl-rpt-header">
            <tr><th rowspan="2" class="ctrl-name">Control Name</th><th rowspan="2" class="ctrl-description">Description</th><th rowspan="2" class="ctrl-risks">Risks</th><th colspan="2" class="target-state">TARGET STATE</th><th colspan="4" class="ctrl-benefits">Benefits</th></tr>
            <tr class="second-row-ctrl-rpt"><th class="ctrl-EASI">EASI</th><th class="ctrl-solution">Proposed Solution</th><th class="ctrl-risk">Risk Reduction</th><th class="ctrl-client-svc">Client Svc</th><th class="ctrl-efficiency">Efficiency</th><th class="ctrl-competitive-advantage ">Competitive Adv</th></tr>

        </thead>

＆＃13;

Answer 1

如果您只想让下面的两个th元素采用百分比宽度，请按类名指定宽度：

JS Fiddle（添加蓝色背景使其明显变得明显）

.ctrl-EASI {
  width: 30%;
}
.ctrl-solution {
  width: 70%;
}

Answer 2

以这种方式为你的TH分配宽度

<th style="width:30%" class="ctrl-EASI">EASI</th><th style="width:70%" class="ctrl-solution">Proposed Solution</th>

或者您可以在样式类中指定宽度

 .ctrl-EASI {
 width: 30%;
}
.ctrl-solution {
width: 70%;
}

如何调整使用colspan创建的列的列宽

2 个答案: