如何隱藏空白表格的邊框（HTML，Javascript）

Question

我想從屏幕上完全刪除HTML表，但以后仍然可以向其中添加行。 我有以下代碼從表中刪除所有行（基本上，它將表的內部HTML設置為“”）：

function removeAllRows() {
    table = document.getElementById("myTable")
    table.innerHTML = ""
}

但是，調用此函數時，表格並未完全刪除...表格上有一個小斑點，我認為這與表格元素的1像素邊框有關。

我想修改此功能以從屏幕上完全刪除表格，當表格為空時，它基本上將隱藏表格邊框。

我可以在樣式塊中添加一些內容嗎？

現在，我的樣式塊看起來像：

table, td {
    border: 1px solid black;
    border-collapse: separate;
    empty-cells: hide;
}

empty-cells: hide; 將隱藏空單元格的邊框，但如果整個表格沒有單元格，則不隱藏整個表格的邊框。

有什么方法可以隱藏空表的邊框嗎？

小提琴

Answer 1

要隱藏表格，您可以執行此操作...

function removeAllRows() {
    var table = document.getElementById("myTable")
    // Checking that the table element exists before setting it to hidden to avoid nullreference exceptions.
    if(!!table){table.hidden = true;}
}

Answer 2

您可以通過編程方式更改邊框。 在removeAllRows（）中添加此行

table.style.border="0px";

然后在addRow（）方法中，向后添加邊框：

table.style.border="1px solid black";

Answer 3

您可以在表格中添加無邊框類

function removeAllRows() {
    table = document.getElementById("myTable")
    table.innerHTML = ""
    table.className = 'no-border';
}

在您的CSS文件中：

.no-border {
    border: none;
}

Answer 4

不能僅靠CSS來解決。 但是您可以隱藏表格，也可以只切換classlist屬性

if (table.children.length) {
    table.classList.toggle('border') // whatever should replace default
}