Граница таблицы, влияющая на размер ячейки

Question

Может кто-нибудь сказать мне, почему, когда я помещаю border=1 на стол, это исправляет его макет?

В этом проблема: я написал некоторый JavaScript, который делает меня организационной диаграммой.Если я поставлю границу вокруг таблиц, которые составляют диаграмму, все выстроится идеально.Если я удаляю границы, некоторые линии изменяются по ширине (и кажутся случайными) по ширине.Вы заметите это в красных линиях, которые соединяют диаграмму org.

Это для встроенного атрибута "border" (такого как <table border="1">).

Вот две демонстрации:

Границы (хорошо, выглядит все выровненными): http://andrewvantran.com/table1.html

Без границ (плохо, все смещены): http://andrewvantran.com/table2.html

Я бы хотел, чтобы стол был накрыткак это происходит с границами, но я не хочу границ!Я не могу смоделировать макет таблицы с границами, если не сохраню границы (что мне не нужно).Есть идеи?

Answer 1

Попробуйте добавить border-collapse: collapse; к вашей таблице стилей.Похоже, это многое исправит в вашем случае.

Кроме этого, я бы предложил вам по крайней мере использовать ширину для ячеек.Различные браузеры обрабатывают рисование ячеек по-разному.Если вы укажете ширину, вы можете быть более уверены, что ячейки выровнены вправо.При тестировании графика используйте инструмент инспектора, такой как Firebug, чтобы определить, где находится каждая ячейка.Это вам очень поможет.

Answer 2

Вы установили таблицу на border-collapse:collapse;?По природе коллапс по умолчанию равен separate, где ячейки имеют свои собственные границы.Если вы установите его свернуть, они сливаются, и он "выглядит правильно"