无法通过CSS或HTML更改表列宽度

时间:2014-04-29 11:36:39

标签: html css html5 css3

我无法通过css或H​​TML width属性更改表格的宽度。

我的Html代码如下 :

<!DOCTYPE html>
<html>
    <head> 
        <!--  Importing css -->
        <link rel="stylesheet" type="text/css" href="sheet.css">
        <!-- Loading Bootstrap -->
        <link href="bootstrap/css/bootstrap.css" rel="stylesheet">
        <!-- Loading Flat UI -->
        <link href="css/flat-ui.css" rel="stylesheet">
        <link rel="stylesheet" type="text/css" href="sheet.css">
    </head>
    <body>
        <div class="feedback-ques11">
            <table id="feedback-table" class="rating-table" cellpadding="2" cellspacing="2" width="100%">
                <tr id="feed-ques11" class="feed-ques" >
                    <td style="width:900px;">
                        <p>Do you suggest  </p>
                    </td>
                    <td style="width:300px;">
                        <div class="outer-box" id="right-box" >
                            <span class="txt">YES</span>
                            <div class="inner-box"></div>
                        </div>
                    </td>
                </tr>
            </table>
        </div>

我正在创建两列,我正在尝试将列宽更改为75%和25%。但是无法做到。

2 个答案:

答案 0 :(得分:0)

您只需将像素值更改为style属性中的百分比值。

<td style="width:75%;">
     <p>Do you suggest</p>
</td>
<td style="width:25%;">
     <div class="outer-box" id="right-box"> <span class="txt">YES</span>
           <div class="inner-box"></div>
     </div>
</td>

<强> DEMO

我建议使用类而不是内联样式来提高性能和可重用性,如下所示:

<style>
.first {
    width:75%;
}

.second {
    width:75%;
}
</style>

<td class="first">
     <p>Do you suggest</p>
</td>
<td class="second">
     <div class="outer-box" id="right-box"> <span class="txt">YES</span>
           <div class="inner-box"></div>
     </div>
</td>

答案 1 :(得分:0)

我认为,你已经给出了&#34; feedback-ques11&#34;班级名称。并且表的宽度不应该比其父控件更大。如果您为表格的父div提供100%的宽度,那么您可以按样式和css设置表格的宽度。