Question

只有Bootstrap css，表格宽度可以正常工作，但是对于我的css样式，td宽度显示非常糟糕。

<table>                                                                            
     <tbody>                       
        {#items}
        <tr onclick="selectPickPoint(this);">
            <td width="50" align="center"><input name="pickpointid" type="radio" value="{customer_id}"></td>
            <td width="300">
                <b>{name}</b> <i style="font-size:9px;">#{customer_id}</i>
                <br>
                {address} <br> {postal_code} <a href="{map_link}" target="_blank" style="font-size:10px;">(ver en el mapa</a>)</td>
        </tr>
        {/items}
    </tbody>
</table>

您可以在这里查看渲染的示例（请参阅选择的商店表）： https://jsfiddle.net/5ghpqx8L/3/

Answer 1

你似乎在你的小提琴中有以下css：

.puntosdeventa input, .puntosdeventa select {
  width: 235px;
}

这会导致您的问题。如果您可以使用以下行替换此css，它将正常工作：

.puntosdeventa input, .puntosdeventa select {
  width: auto;
}

我建议对输入和选择使用不同的css声明。很可能你想要一个比输入更宽的选择元素。

Answer 2

您也可以更改这些行来修复它：

旧：

.puntosdeventa input, .puntosdeventa select {
   width: 235px;
 }

新：

.puntosdeventa input[type='text'], .puntosdeventa select {
    width:235px;  
}

https://jsfiddle.net/5ghpqx8L/5/

Answer 3

您已将所有输入（包括单选按钮）的宽度设置为235px，这会强制第一列扩展。

尝试添加新的样式规则，例如：

.puntosdeventa input[type='radio'] { width:auto; }

Td宽度不起作用

3 个答案: