Question

我有一个奇怪且令人沮丧的问题。对于简单的标记：

<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>

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

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

Answer 1

您需要将其添加到CSS：

table { border-collapse:collapse }

Answer 2

像这样修改您的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>

（我添加了border="0" cellpadding="0" cellspacing="0"）

在CSS中，您可以执行以下操作：

table {
    border-collapse: collapse;
}

Answer 3

添加一些css：

td, th {
   border:none;
}

Answer 4

将表格的cellspacing属性设置为0。

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

Answer 5

删除边框，juste使用这样的css：

package com.nulledapps.website2app;

import android.content.Intent;
import android.support.v7.app.AppCompatActivity;
import android.os.Bundle;

public class SplashScreen extends AppCompatActivity {

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_splash_screen);
        Thread mythraed = new Thread(){
            @Override
            public void run() {
                try {
                    sleep(3000);
                    Intent intent = new Intent(getApplicationContext(),MainActivity.class);
                    startActivity(intent);
                    finish();
                } catch (InterruptedException e) {
                    e.printStackTrace();
                }
            }
        };
        mythraed.start();
    }
}

Answer 6

您可能还想添加

table td { border:0; }

以上相当于设置cellpadding =“0”

它摆脱了浏览器自动添加到单元格的填充，这可能取决于doctype和/或用于重置默认浏览器样式的任何CSS

Answer 7

在尝试上述建议后，唯一对我有用的是在子主题的style.css的以下部分中将border属性更改为“0”（执行“查找”操作以找到每个属性 - 以下只是片段）：

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

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

之后看起来像这样：

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

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

Answer 8

尝试将border: 0px; border-collapse: collapse;的样式指定给表格元素。

Answer 9

有时甚至在清除border s。

之后

原因是你在td内有图片，让图片display:block解决了。

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

9 个答案: