Question

我的表格单元格具有固定的宽度，并且包含选择列表和一行中的一个或两个按钮。选择应填充按钮前的所有空格。我用div包装器解决了这个问题，但我的老板不允许我使用任何额外的div，因为从他的观点来看，每个元素都必须象征一些程序数据。他也不允许我使用flexbox。

以下是它应该是什么样的代码

＆＃13;

 td {
        border: 1px solid black;
        padding: 1px;
        min-width: 300px;
       }
    table {
          margin: 50px;
          background-color: green;
          border-collapse: collapse;
          }
    button {
           padding: 1px;
           float:right;
           }
    select {
            width: 100%;
           }
    #wrap {
           overflow:hidden;
           }

＆＃13;

<table>
<tr>
<td>
<button>+</button>
<div id="wrap">
<select>
 <option value>ttttttttt</option>
</select>
</div>
</td>
</tr>
</table>

＆＃13;

有没有办法可以在没有其他元素或非跨浏览器解决方案（如flexboxes）的情况下执行此操作？

Answer 1

在内部表的帮助下尝试此选项，无需任何其他包装器。 https://jsfiddle.net/xkLaq47m/

/ --- --- CSS /

 td {
        border: 1px solid black;
        padding: 1px;
        min-width: 300px;
       }
    table {
          margin: 50px;
          background-color: green;
          border-collapse: collapse;
          }
    .inner-table{
      margin: 0;      
    }
    .inner-table__button-cell{
      min-width: 15px;
    }
    button {
           padding: 1px;
           float:right;
           }
    select {
            width: 100%;
           }


  /*---HTML---*/  

<table>
<tbody>  
<tr>
  <td>
  <table class="inner-table">
    <tbody><tr>
      <td>
<select>
 <option value="">ttttttttt</option>
</select>
      </td>
      <td class="inner-table__button-cell">
        <button>+</button>
        </td>
      </tr>
    </tbody></table>
  </td>  
</tr>
</tbody>
</table>

CSS扩展下拉列表以填充固定宽度表格单元格中的剩余空间

1 个答案: