如何设置包含输入元素的列的宽度？

Question

我使用以下代码希望生成一个表，其第一列占总宽度的40％，而其他列占总宽度的10％。但是，我得到的是宽度相等的列。

<table >
<col style="width:40%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<col style="width:10%">
<thead>
    <tr>
        <th>head 1</th>
        <th>head 2</th>
        <th>head 3</th>
        <th>head 4</th>
        <th>head 5</th>
        <th>head 6</th>
    </tr>
</thead>
<tbody>
    <tr>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
        <th><input type="text" val=""></th>
    </tr>
</tbody>

</table>

Answer 1

只需添加以下规则：input { width: 100%; }

<强> FIDDLE

＆＃13;

＆＃13;

th {
  border: 1px solid red;
}
input {
  width: 100%;
}

＆＃13;

<table border=1>
  <col style="width:40%">
    <col style="width:10%">
      <col style="width:10%">
        <col style="width:10%">
          <col style="width:10%">
            <col style="width:10%">
              <col style="width:10%">
                <thead>
                  <tr>
                    <th>head 1</th>
                    <th>head 2</th>
                    <th>head 3</th>
                    <th>head 4</th>
                    <th>head 5</th>
                    <th>head 6</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                    <th>
                      <input type="text" val="">
                    </th>
                  </tr>
                </tbody>

</table>

＆＃13;

＆＃13;

＆＃13;

Answer 2

您正在为td指定宽度，但没有为表指定。所以你需要添加以下代码才能正常工作。

table {
table-layout: fixed;
width:100%;
}

Answer 3

演示 - http://jsfiddle.net/yr74u957/4/

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
th {
  border: 1px solid red;
}
table {
  width: 100%;
  table-layout: fixed;
}
table th {
  width: 10%;
}
table th input {
  width: 100%;
  border: 1px solid blue;
}
table th:first-child {
  width: 40%;
}

<table border=1>
  <thead>
    <tr>
      <th>head 1</th>
      <th>head 2</th>
      <th>head 3</th>
      <th>head 4</th>
      <th>head 5</th>
      <th>head 6</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
      <th>
        <input type="text" val="">
      </th>
    </tr>
  </tbody>
</table>