Дополнительная граница таблицы FireFox CSS

Я столкнулся с проблемой CSS линии границы таблицы в Firefox, когда CSS border-collapse схлопывается, и у меня есть 2 объединенные ячейки, одна из них имеет границу в 1 пиксель. Справа имеется лишняя нежелательная граница. Эта проблема не существует в других браузерах, IE и Chrome не имеют проблемы.

Версия FireFox

Mozilla / 5.0 (Windows; U; Windows NT 5.1; zh-CN; rv: 1.9.2.8) Gecko / 20100722 Firefox / 3.6.8 (.NET CLR 3.5.30729)

Мой проверенный док-тип:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

.

alt text

<table cellspacing="0" cellpadding="0" style="position: absolute; width: 217px; left: 0px;border-collapse:collapse">
<colgroup><col col="0" style="width: 72px;"><col col="1" style="width: 72px;"><col col="2" style="width: 72px;">
</colgroup>
<tbody>
<tr tridx="0" style="height: 19px;">
<td rowspan="2" colspan="2" style="border: 1px solid #000000"></td><td row="0" col="2"></td>
</tr>
<tr tridx="1" style="height: 19px;"><td row="1" col="2"></td></tr>
<tr tridx="2" style="height: 19px;"><td row="2" col="0"></td><td row="2" col="1"></td><td row="2" col="2"></td></tr>
<tr tridx="3" style="height: 19px;"><td rowspan="3" colspan="2" style="border: 1px solid #000000"></td><td></td></tr>
<tr tridx="4" style="height: 19px;"><td ></td></tr>
<tr tridx="5" style="height: 19px;"><td></td></tr>
</tbody>
</table>

css border html-table firefox3.6
person Fisher    schedule 08.10.2010    source источник
comment
Мой протестированный тип документа: ‹! DOCTYPE HTML PUBLIC - // W3C // DTD HTML 4.0 Transitional // EN›, автоматически сгенерированный editplus.   -  person Fisher    schedule 08.10.2010

Ответы (1)


arrow_upward
3
arrow_downward

Я не знаю, есть ли лучшее решение для этого, но проблема заключается в colspan и использовании border-collapse.

Я переписал код только потому, что он мне показался беспорядочным, но в основном решение заключалось в использовании border-spacing: 0; вместо border-collapse: collapse;.

Это не идеально, потому что это не одно и то же. Итак, если все ваши ячейки имеют границы, то ячейки внутри таблицы удвоятся, образуя границу в 2 пикселя.

Однако в этой ситуации вы ничего не заметите и все равно можете использовать border-collapse.

Что ж, думаю, я сказал достаточно.

Вот мой код (немного отличается от вашего, но делает то же самое):

CSS:

<style type="text/css">
.tableStyle {
 position: absolute;
 left: 0px;
 border-spacing: 0;
}
.tableStyle td {
 height: 19px;
 width: 72px;
}
.blackBorder {
 border: 1px solid #000;
}
</style>

HTML:

<table class="tableStyle">
 <tr>
  <td rowspan="2" colspan="2" class="blackBorder">1</td>
  <td>2</td>
 </tr>
 <tr>
  <td>3</td>
 </tr>
 <tr>
  <td>4</td>
  <td>5</td>
  <td>6</td>
 </tr>
 <tr>
  <td rowspan="3" colspan="2" class="blackBorder">7</td>
  <td>8</td>
 </tr>
 <tr>
  <td>9</td>
 </tr>
 <tr>
  <td>10</td>
 </tr>
</table>
person Lucas    schedule 08.10.2010
comment
Спасибо за четкие объяснения и полезные советы. На самом деле, не все мои клетки имели границы, но некоторые из них, это зависит от обстоятельств. Если я использую border-collapse: collapse, таблица удваивается, создавая границы в 2 пикселя, иначе другие ячейки без границ будут иметь лишние нежелательные границы. - person Fisher; 11.10.2010