表單元格中的非均勻虛線邊框

Question

我已將CSS border-bottom:1px dashed #494949;應用於HTML表格的單個行的幾個連續單元格，但邊框不統一。每個單元末端的破折號顯示時間稍長。虛線邊框也不統一。我也使用border-collapse:collapse;

下面是截圖：

有什麼辦法，我可以得到一致的虛線框？

Answer 1

瀏覽器在渲染虛線邊框的怪事。您可以通過刪除單元格間距和單元格填充並設置元素上的邊框而不是單元格上的邊框來對抗它們。

table { border-collapse: collapse; } 
td { padding: 0; } 
tr { border-bottom:1px dashed #494949; } 

但是，這似乎仍然在IE 9（在單元連接點）失敗，而舊的瀏覽器忽略了在表格行上設置的邊界。

請考慮使用純色的灰色邊框。它始終如一地工作，並可能在視覺上可接受，甚至更好。

Answer 2

很難說沒有屏幕截圖或演示的情況下發生了什麼，但它聽起來像是在轉換到下一個單元格時顯得更長，因爲最後一個短劃線觸及下一個單元格中的第一個短劃線。

在這種情況下，嘗試將邊框放在整個行而不是單個單元格上。

Answer 3

我不確定，但它看起來像呈現問題。即使使用背景圖片而不是邊框​​底圖也會遇到同樣的問題。

Answer 4

在這種情況下，最好的辦法是創建一個重複的圖像文件，其高度是表格行的高度。將其設置爲表格背景，並確保它重複。我已經測試過了，它可以工作。請注意，在爲此示例創建的PNG文件中，破折號每個長度爲3像素，右側有三個空白尾部像素，最終尺寸爲30像素（寬）x 29像素（高）。

下面的代碼：

.borderTable { 
 
    background: url(http://www.windycitywebsites.com/wp-content/uploads/2012/03/dash_png.png); 
 
    background-repeat: repeat; 
 
} 
 

 
.borderTable td { 
 
    height: 29px; 
 
}

<table class="borderTable" width="350" border="0" cellspacing="0" cellpadding="0"> 
 
    <tr class="stuff"> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr class="stuff"> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
    <tr> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    <td>&nbsp;</td> 
 
    </tr> 
 
</table>