使用CSS删除不需要的表单元格边框

I have a peculiar and frustrating problem. For the simple markup:

我有一个奇怪而令人沮丧的问题。简单的标记:

<table>
    <thead>
        <tr><th>1</th><th>2</th><th>3</th></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

I apply different background-color values to the thead, tr, and tr odd elements. The problem is that in most browsers, every cell has an unwanted border which is not the color of any of the table rows. Only in Firefox 3.5 does the table have no borders in any cell.

我对thead、tr和tr奇元素应用不同的背景色值。问题是，在大多数浏览器中，每个单元格都有一个不需要的边框，这个边框不是任何表行的颜色。只有在Firefox 3.5中，表格在任何单元中都没有边框。

I'd just like to know how to remove these borders in the other major browsers so that the only thing you see in the table are the alternating row colors.

我只是想知道如何在其他主要浏览器中删除这些边框，以便您在表中看到的是交替行颜色。

10 个解决方案

#1

178

You need to add this to your CSS:

您需要将此添加到您的CSS:

table { border-collapse:collapse }

#2

Modify your HTML like this:

像这样修改HTML:

<table border="0" cellpadding="0" cellspacing="0">
    <thead>
        <tr><td>1</td><td>2</td><td>3</td></tr>
     </thead>
    <tbody>
        <tr><td>a</td><td>b></td><td>c</td></tr>
        <tr class='odd'><td>x</td><td>y</td><td>z</td></tr>
    </tbody>
</table>

(I added border="0" cellpadding="0" cellspacing="0")

(我添加了边框="0" cellpadding="0" cellpadding="0")

In CSS, you could do the following:

在CSS中，您可以做以下事情:

table {
    border-collapse: collapse;
}

#3

add some css:

添加一些css:

td, th {
   border:none;
}

#4

Set the cellspacing attribute of the table to 0.

将表的cellspace属性设置为0。

You can also use the CSS style, border-spacing: 0, but only if you don't need to support older versions of IE.

您还可以使用CSS样式:border-间距:0，但前提是您不需要支持旧版本的IE。

#5

to remove the border , juste using css like this :

要删除边框，可以使用css:

td {
 border-style : hidden!important;
}

#6

You may also want to add

您可能还想添加

table td { border:0; }

the above is equivalent to setting cellpadding="0"

上述操作相当于设置cellpadding="0"

it gets rid of the padding automatically added to cells by browsers which may depend on doctype and/or any CSS used to reset default browser styles

它消除了浏览器自动添加到单元格中的填充，这些填充可能依赖于doctype和/或用于重置默认浏览器样式的任何CSS

#7

After trying the above suggestions, the only thing that worked for me was changing the border attribute to "0" in the following sections of a child theme's style.css (do a "Find" operation to locate each one -- the following are just snippets):

在尝试了上述建议之后，对我来说唯一有效的方法是在子主题样式的以下部分将border属性更改为“0”。css(做一个“查找”操作来定位每一个——以下是一些片段):

.comment-content table {
    border-bottom: 1px solid #ddd;

.comment-content td {
    border-top: 1px solid #ddd;
    padding: 6px 10px 6px 0;
}

Thus looking like this afterwards:

后来的样子是这样的:

.comment-content table {
    border-bottom: 0;

.comment-content td {
    border-top: 0;
    padding: 6px 10px 6px 0;
}

#8

Try assigning the style of border: 0px; border-collapse: collapse; to the table element.

尝试设置边框样式:0px;border-collapse:崩溃;表元素。

#9

-1

sometimes even after clearing borders.

有时甚至在清除边界之后。

the reason is that you have images inside the td, giving the images display:block solves it.

原因是你有图像在td内，给图像显示:block解决它。

#10

-2

<td style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;">

And if you want you can to something like that

如果你想的话，你可以这样做

$style = ' style=" border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px;"';

<td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td><td $style>bla bla</td>

#1

178