Question

我有一个表，其中指定width：100％，但我不想扩展一个特定的列（图像列）以进行扩展。有可能吗？

示例：

body {}

img.consoleIcon,
img.ConsoleIconColumnHeader {
  width: 17px !important;
  height: 17px !important;
  vertical-align: middle;
}

table td,
table th {
  border: 1px solid #d0d0d0;
  table-layout: fixed;
  border-collapse: collapse !important;
}

<table>
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Facebook</th>
    <th>Twitter</th>
  </thead>
  <tbody>
    <td>Shubh</td>
    <td>33</td>
    <td>
      <a>
        <img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
      </a>
    </td>
    <td></td>
  </tbody>
</table>

现在，上面是表格的简单示例，没有为其指定任何宽度，现在我继续并应用样式宽度：100％，但我不希望图像列（例如Facebook）扩展。

body{
 
}
img.consoleIcon, img.ConsoleIconColumnHeader {
    width: 17px !important;
    height: 17px !important;
    vertical-align: middle;
}

table td, table th{
      
  border:1px solid #d0d0d0;
  table-layout: fixed;
  border-collapse: collapse !important;
}

<table style="width:100%">
<thead>
  <th>Name</th>
  <th>Age</th>
  <th>Facebook</th>
  <th>Twitter</th>
</thead>
<tbody>
  <td>Shubh</td>
  <td>33</td>
  <td>
    <a>
      <img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
                </a>
  </td>
  <td></td>
</tbody>
</table>

Answer 1

您可以在td元素上设置宽度。
在这里，我在icon-cell元素上定义了一个td类，并且在CSS中设置了宽度：

img.consoleIcon, img.ConsoleIconColumnHeader {
    width: 17px !important;
    height: 17px !important;
    vertical-align: middle;
}
table td, table th {          
  border: 1px solid #d0d0d0;
  table-layout: fixed;
  border-collapse: collapse !important;
}
.icon-cell {
  width: 50px;
}

<table style="width:100%">
  <thead>
    <th>Name</th>
    <th>Age</th>
    <th>Facebook</th>
    <th>Twitter</th>
  </thead>
  <tbody>
    <td>Shubh</td>
    <td>33</td>
    <td class="icon-cell">
      <a>
        <img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
      </a>
    </td>
    <td></td>
  </tbody>
</table>

Answer 2

通过为表列应用固定宽度可以解决此问题。

希望对您有用。

这是我的代码

<table style="width:100%">
<thead>
  <th style="width:35%;">Name</th>
  <th style="width:30%;">Age</th>
  <th style="width:5%;">Facebook</th>
  <th style="width:30%;">Twitter</th>
</thead>
<tbody>
  <td>Shubh</td>
  <td>33</td>
  <td>
    <a>
      <img title="FB" class="consoleIcon" src="https://image.flaticon.com/icons/svg/124/124010.svg">
                </a>
  </td>
  <td></td>
</tbody>
</table>

在CSS中

body{

}
img.consoleIcon, img.ConsoleIconColumnHeader {
    width: 17px !important;
    height: 17px !important;
    vertical-align: middle;
}

table td, table th{

  border:1px solid #d0d0d0;
  table-layout: fixed;
  border-collapse: collapse !important;
}

这是工作小提琴

[http://jsfiddle.net/1bn5ke9s/][1]

当父级宽度为100％时防止列扩展

2 个答案: