Как установить высоту тд 0px в таблице? - PullRequest
Новая
       4

Как установить высоту тд 0px в таблице?

3 голосов
/ 02 апреля 2012

У меня есть HTML-таблица, содержащая несколько строк (это создается динамически).Все <tr> s имеют один <td> внутри.

Если у одного <td> нет содержимого HTML внутри, я бы хотел, чтобы он был невидимым.

Как это можно сделать?(Не то, чтобы HTML-код отображался динамически, и я не хочу использовать display:none или любое другое свойство в <td> или <tr>).

Пример кода: 

<html>
    <body bgcolor="#E6E6FA">
        <table cellSpacing="0" cellPadding="0">
            <tr>
                <td>one cell</td>
            </tr>
            <tr>
                <td bgcolor="#FF0000"></td>
            </tr>
            <tr>
                <td>two cell</td>
            </tr>
        </table>
    </body>
</html>

В Firefox пустой TD невидим.Однако в IE TD занимает 1 пиксель в высоту:

enter image description here

Глядя с помощью DOM Inspector, я вижу, что это занимает 1 пиксель:

enter image description here

Как я могу установить, чтобы TD не был виден?Какие скрипты я могу выполнить внутри ТД?

Ответы [ 2 ]

1 голос
/ 02 апреля 2012

Вы можете использовать псевдоселектор CSS :empty: 

#myDynamicTable td:empty
{
  display: none;
}

jsFiddle пример: http://jsfiddle.net/vKEBY/6/

А если вы хотите поддерживать IE 

var ieVer = getInternetExplorerVersion();
if (ieVer != -1 && ieVer < 9.0) {
    // for IE<9 support
    var dynamicTable = document.getElementById("myDynamicTable");
    var TDs = dynamicTable.getElementsByTagName("td");

    for (var i = 0; i < TDs.length; i++) {
        if (TDs[i].innerHTML == "") {
            TDs[i].style.display = "none";
        }
    }
}

/**
  * All credits to Microsoft
  * http://msdn.microsoft.com/en-us/library/ms537509(v=vs.85).aspx#ParsingUA
  */
function getInternetExplorerVersion()
// Returns the version of Internet Explorer or a -1
// (indicating the use of another browser).
{
    var rv = -1; // Return value assumes failure.
    if (navigator.appName == 'Microsoft Internet Explorer') {
        var ua = navigator.userAgent;
        var re = new RegExp("MSIE ([0-9]{1,}[\.0-9]{0,})");
        if (re.exec(ua) != null) rv = parseFloat(RegExp.$1);
    }
    return rv;
}​

jsFiddle пример: http://jsfiddle.net/vKEBY/6/

0 голосов
/ 02 апреля 2012

Если использовать jQuery, этот скрипт может стать намного чище (только мысль). 

$('#myTable td:empty').hide();
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...