包含单选按钮的表在Firefox和移动Safari中被拉伸

Question

我有一个表，其中一行包含“固定”内容，然后包含一定数量的行，其中包含数据库中的内容。每行中的前3 <td>包含一个单选按钮，它是表单的一部分。我的问题是这些包含单选按钮的字段使表拉伸，这使得其他字段太小。请参阅我附带的照片（第一张来自Mac Safari / Chrome，第二张来自Firefox）：

在Chrome中：

在Firefox中：

下面是我的代码的一部分，它打印单选按钮。我有tr，td，table，form等所有必需的开始和关闭部分.php变量，作为单选按钮的名称打印，只包含一个整数而不包含其他字符。

echo '<tr>';
echo '<td class="tg-s6z2"><input type="radio" name="'.$koncerter->kon_id.'" value="0" checked /></td>';
echo '<td class="tg-s6z2"><input type="radio" name="'.$koncerter->kon_id.'" value="1" /></td>';
echo '<td class="tg-s6z2"><input type="radio" name="'.$koncerter->kon_id.'" value="2" /></td>';

有任何建议，我如何解决这个问题？ 我也尝试将它添加到周围的div容器中：

<div class="content" style="max-width:650px;">

Answer 1

因为当你删除单选按钮它恢复正常时，你可能有input的CSS声明，它有一个宽度（如300px宽度）。所以只需删除那个宽度，或者这样做：

input[type="radio"]{width:30px; /*or whatever */}

或者：删除输入样式，然后仅定位您需要的样式

input[type="text"]{width:120px; /*or whatever */}

在第一种情况下，我们将仅为收音机添加样式。在第二个选项中，我们重置样式，然后只设置您需要的那些元素