無法更改的引導表格的寬度

我有一個自舉表是這樣的無法更改的引導表格的寬度

<table class="table table-bordered table-striped table-highlight"> 
 
\t \t \t <tbody> 
 
\t \t \t \t <tr> 
 
\t \t \t \t \t <td align="center" style="width:30%"><input type="text" 
 
\t \t \t \t \t \t class="form-control" id="tag" name="tag" 
 
\t \t \t \t \t \t placeholder="Enter Tag For The Change" maxlength='140' 
 
\t \t \t \t   > <input type="hidden" 
 
\t \t \t \t \t \t class="form-control" id="userEmail" name="userEmail" 
 
\t \t \t \t \t \t placeholder="Enter Tag For a Change" maxlength='140'></td> 
 
\t \t \t \t </tr> 
 
\t \t \t \t </tbody> 
 
\t \t \t </table>

儘管列的寬度設置爲30％，該表還擴展在整個屏幕上我也有表

table { 
 
\t table-layout: fixed; 
 
\t word-wrap: break-word; 
 
}

這個CSS集210

是否有另一種方法可以做到這一點？

來源

2016-06-29 Evan Root

除非在內加入另一個''，否則它將佔滿全寬。你可以給寬度'

'本身。 – Rohit

回答

如果你希望你的表是小並不會佔用整個屏幕，然後你有你的內聯風格在錯誤的地方。

不是設置<td>的寬度，而是設置<table>的寬度。

這應該解決您的問題：

HTML：

<table class="table table-bordered table-striped table-highlight" style="width: 30%"> 
    <tbody> 
     <tr> 
      <td align="center"> 
       <input type="text" class="form-control" id="tag" name="tag" placeholder="Enter Tag For The Change" maxlength='140' /> 
       <input type="hidden" class="form-control" id="userEmail" name="userEmail" placeholder="Enter Tag For a Change" maxlength='140'/> 
      </td> 
     </tr> 
    </tbody> 
</table>

CSS：

table { 
    table-layout: fixed; 
    word-wrap: break-word; 
}

下面是這個動作一Bootply。

來源

2016-06-29 18:03:18

您正在使用表格進行佈局而非數據。我建議使用網格系統，像這樣：

<div class="row"> 
    <div class="col-md-4"> 
    <input type="text" class="form-control" id="tag" name="tag" placeholder="Enter Tag For The Change" maxlength="140"> <input type="hidden" class="form-control" id="userEmail" name="userEmail" placeholder="Enter Tag For a Change" maxlength="140"> 
    </div> 
</div>

如果必須使用的表，可以覆蓋其寬度：

<table class="table table-bordered table-striped table-highlight" style="width:30% !important;">

來源

2016-06-29 17:53:48 Chris

相關問題