HTML隱藏表格行

所以我想向HTML表格的第一個單元格添加一個遞增的數字。我在這個論壇中使用的例子已經完成了。我接下來要做的是隱藏任何只包含第一個單元格中的數字的行。我唯一可用的選項是css，但我不確定它是否可行。我到目前爲止的代碼是HTML隱藏表格行

table { 
 
    border-collapse: collapse; 
 
    counter-reset: rowNumber; 
 
} 
 
table tr:not(:first-child) { 
 
    counter-increment: rowNumber; 
 
} 
 
table td > *:empty { 
 
    display: none; 
 
} 
 
tr > td:empty { 
 
    background-color: yellow; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
}

<table border="1px" empty-cells:hide;> 
 
    <tr> 
 
    <td></td> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
</table>

來源

2016-06-14 law76

所以沒有使用Javascript？我不認爲這是可能的，只是我害怕CSS。我不認爲你可以根據對象的狀態來定位對象的父對象。 –

請檢查下面摘錄符合您的要求。

http://bootsnipp.com/user/snippets/D2ZDA

在這裏，我隱藏所有兄弟TR元素;如果第一TR是空的。使用CSS，你不能控制父母，因爲沒有父母選擇器。

這裏是代碼 -

table { 
 
    border-collapse: collapse; 
 
} 
 
table tr:not(:first-child) { 
 
    counter-increment: rowNumber; 
 
} 
 
tr > td:first-child:empty, 
 
tr > td:first-child:empty ~ td { 
 
    display: none; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
}

<table border="1px" empty-cells:hide;> 
 
    <tr> 
 
    <td>Has Text</td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Has Text</td> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td></td> 
 
    <td>Test</td> 
 
    </tr> 
 
</table>

來源

2016-06-14 10:43:27

你能在你的回答中發佈相關代碼嗎？ Bootsnipp需要一個帳戶才能查看代碼，因此對於答案並不理想。 –

謝謝你們的幫助。這很好 – law76

大廈@CharanKumar答案，你可以做的是去除第一列，編號文本應用到該行。然後，您可以添加一些padding和border-right來模擬單獨的單元格。

它看起來象下面這樣：

table { 
 
    border-collapse: collapse; 
 
} 
 
table tr:not(:first-child) { 
 
    counter-increment: rowNumber; 
 
} 
 
tr > td:first-child:empty, 
 
tr > td:first-child:empty ~ td { 
 
    display: none; 
 
} 
 
table tr td:first-child::before { 
 
    content: counter(rowNumber); 
 
    min-width: 1em; 
 
    margin-right: 0.5em; 
 
    border-right: 1px solid black; 
 
    padding: 1px 5px 1px 1px; 
 
}

<table border="1px" empty-cells:hide;> 
 
    <tr> 
 
    <td></td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test</td> 
 
    </tr> 
 
    <tr> 
 
    <td>Test</td> 
 
    </tr> 
 
</table>

來源

2016-06-14 11:24:30

HTML隱藏表格行

回答

相關問題