Question

我有一个轻微的CSS问题，我无法弄清楚。如果你查看单词“Answer”旁边的行，它会显示一个黑色的小矩形（实际上是5个小方块，但你可能看不清楚）。我相信这些是边界，但我无法摆脱它。有谁知道怎么摆脱它？

代码在jsfiddle中是here

Answer 1

小黑色矩形是嵌套在单元格内的额外表格的单元格边框。从这些单元格中删除边框。

您可以将以下内容添加到您的css中：

#optionAndAnswer td table td {
    border: 0px;   
}

Answer 2

出于某种原因，你在那里加了一张桌子。桌子有边框......

<td>
  <table>...</table>
</td>

所以我建议摆脱这个td中的表格。

Answer 3

这是一个充满隐藏输入的表格。如果您将style="display:false;"添加到<table>标记，则不会显示这些行：

<table style="display:none">
<tbody><tr>
<td>
<input type="button" onclick="btnclick(this);" value="A" id="answerA" name="answerAName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="B" id="answerB" name="answerBName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="C" id="answerC" name="answerCName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="D" id="answerD" name="answerDName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="E" id="answerE" name="answerEName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="F" id="answerF" name="answerFName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="G" id="answerG" name="answerGName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="H" id="answerH" name="answerHName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="I" id="answerI" name="answerIName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="J" id="answerJ" name="answerJName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="K" id="answerK" name="answerKName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="L" id="answerL" name="answerLName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="M" id="answerM" name="answerMName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="N" id="answerN" name="answerNName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="O" id="answerO" name="answerOName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="P" id="answerP" name="answerPName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Q" id="answerQ" name="answerQName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="R" id="answerR" name="answerRName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="S" id="answerS" name="answerSName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="T" id="answerT" name="answerTName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="U" id="answerU" name="answerUName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="V" id="answerV" name="answerVName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="W" id="answerW" name="answerWName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="X" id="answerX" name="answerXName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Y" id="answerY" name="answerYName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Z" id="answerZ" name="answerZName" class="answerBtns">
</td>
</tr>
<tr>
<td>
<input type="button" onclick="btnclick(this);" value="True" id="answerTrue" name="answerTrueName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="False" id="answerFalse" name="answerFalseName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="Yes" id="answerYes" name="answerYesName" class="answerBtns">
<input type="button" onclick="btnclick(this);" value="No" id="answerNo" name="answerNoName" class="answerBtns">
</td>
</tr>
</tbody></table>

以下是您的jsfiddle的更新版本：http://jsfiddle.net/pSy97/9/

Answer 4

实际上黑色方块是一个嵌套的空表，它继承了td和th的黑色边框。你可以轻松地测试它，添加这个简单的css规则：

td td, td th { border: 1px solid red!important; }

我想用css删除一些东西

4 个答案: