Question

我有一个像这样的引导表

＆＃13;

<table class="table table-bordered table-striped table-highlight">
			<tbody>
				<tr>
					<td align="center" style="width:30%"><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>

＆＃13;

尽管将列的宽度设置为30％，但表格仍会在整个屏幕上展开我也为表格设置了这个CSS

＆＃13;

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

＆＃13;

还有其他办法吗？

Answer 1

如果您希望自己的桌子更小而不占用整个屏幕，那么您的内联样式就会出错。

不是设置<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的实际操作。

Answer 2

您正在使用表格进行布局而不是数据。我建议像这样使用网格系统：

<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;">

无法更改引导表

2 个答案: