HTML表格：刪除空白單元格周圍的邊框

出於某種原因，我正在爲此苦苦掙扎，在HTML中，我通過製作日曆來練習表格。我有一個表頭和一些數據，一切工作正常，但我最終圍繞空單元格的邊界。我只希望有數據的單元格和表格本身具有邊框。HTML表格：刪除空白單元格周圍的邊框

我接近這個錯誤嗎？

此外，有沒有辦法使用行和列值將數據寫入表中的特定單元格？

這裏是我的代碼的編輯部分：

<!DOCTYPE html> 
<html lang="en"> 
<head> 
    <title> Victor's Fall 2015 Timetable</title> 
</head> 

<body> 
    <table border="1"> 
     <tr> 
      <th></th> 
      <th> Monday </th> 
      <th> Tuesday </th> 
      <th> Wedenesday </th> 
      <th> Thursday </th> 
      <th> Friday </th> 
     </tr> 

     <tr> 
      <th> 11:00 </th> 
       <td></td> 
       <td></td> 
       <td rowspan="2">Database Lecture</td> 
       <td></td> 
       <td></td> 
     </tr> 

     <tr> 
      <th> 11:30 </th> 
     </tr> 

     <tr> 
      <th> 12:00 </th> 
       <td></td> 
       <td rowspan="2">Communications Lecture</td> 
       <td rowspan="3">Database Lab</td> 
       <td></td> 
       <td rowspan="2">Java Lecture</td> 
     </tr> 

     <tr> 
      <th> 12:30 </th> 
     </tr>  

     <tr> 
      <th> 1:00 </th> 
     </tr> 

    </table> 
</body> 
</html>

來源

2015-10-03 victor_zg

此頁面是否爲靜態？或動態生成 –

您必須使用table css border-collapse: separate;empty-cells: hide;

有例如：

table 
 
{ 
 
    border-collapse: separate; 
 
    empty-cells: hide; 
 
}

<table border="1"> 
 
     <tr> 
 
      <th></th> 
 
      <th> Monday </th> 
 
      <th> Tuesday </th> 
 
      <th> Wedenesday </th> 
 
      <th> Thursday </th> 
 
      <th> Friday </th> 
 
     </tr> 
 

 
     <tr> 
 
      <th> 11:00 </th> 
 
       <td></td> 
 
       <td></td> 
 
       <td rowspan="2">Database Lecture</td> 
 
       <td></td> 
 
       <td></td> 
 
     </tr> 
 

 
     <tr> 
 
      <th> 11:30 </th> 
 
     </tr> 
 

 
     <tr> 
 
      <th> 12:00 </th> 
 
       <td></td> 
 
       <td rowspan="2">Communications Lecture</td> 
 
       <td rowspan="3">Database Lab</td> 
 
       <td></td> 
 
       <td rowspan="2">Java Lecture</td> 
 
     </tr> 
 

 
     <tr> 
 
      <th> 12:30 </th> 
 
     </tr>  
 

 
     <tr> 
 
      <th> 1:00 </th> 
 
     </tr> 
 

 
    </table>

更新基於OP評論：（？）

它在css文件，但是，如果你不使用css文件，然後您可以在border="1"之後輸入table ...只需加上style="border-collapse: separate; empty-cell:hide;"

<table border="1" style="border-collapse: separate; empty-cells: hide;"> ...等等等等。

來源

2015-10-03 21:36:17 nelek

我以前見過這個解決方案，但我不確定把這段代碼放在哪裏。我所擁有的只是一個.html文件，用我在Notepad ++上編輯的代碼。 –

@victor_zg你可以看到更新。 – nelek

工作，謝謝！ –

如果你的網頁是靜態那麼你可以添加.noborder類空td標籤

.noborder { 
border-style: none; 
}

<td class='noborder'></td>不會有邊界

來源

2015-10-03 21:34:37

我不知道這是否會適合你正在嘗試做的是什麼，但一個辦法是給每個一個id的「座標」

例如：

<table> 
    <tr> 
     <td id="r0c0"> Row 0, Col 0</td> 
     <td id="r0c1"> Row 0, Col 1</td> 
     <td id="r0c2"> Row 0, Col 2</td> 
    </tr> 
    <tr> 
     <td id="r1c0"> Row 1, Col 0</td> 
     <td id="r1c1"> Row 1, Col 1</td> 
     <td id="r1c2"> Row 1, Col 2</td> 
    </tr> 
    <tr> 
     <td id="r2c0"> Row 2, Col 0</td> 
     <td id="r2c1"> Row 2, Col 1</td> 
     <td id="r2c2"> Row 2, Col 2</td> 
    </tr>

有了更多的信息，我可能會給你一個不同的/更好的解決方案，如果這不起作用。

更新：我重讀了這個問題，並意識到這隻能回答你的問題的一部分。無論如何希望它有幫助！

來源

2015-10-03 21:37:32

HTML表格：刪除空白單元格周圍的邊框

回答

相關問題