为table表格设置合并边框

border-collapse: collapse;


例1:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        table {
            margin: 0 auto;
            width: 300px;
            border:1px solid red;
        }
        th,td {
            text-align: center;
            border: 1px solid green;
        }
    style>
head>
<body>
    <table>
        <caption>学生成绩表caption>
        <thead>
            <tr>
                <th>学号th>
                <th>姓名th>
                <th>成绩th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>88td>
            tr>            <tr>
                <td>1td>
                <td>李四td>
                <td>98td>
            tr>            <tr>
                <td>3td>
                <td>王五td>
                <td>68td>
            tr>
        tbody>
        <tfoot>

        tfoot>
    table>
body>
html>

效果预览:
为table表格设置合并边框_第1张图片


修改后:


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Documenttitle>
    <style>
        table {
            margin: 0 auto;
            width: 300px;
            border:1px solid red;
            border-collapse: collapse;/*关键代码*/
        }
        th,td {
            text-align: center;
            border: 1px solid green;
        }
    style>
head>
<body>
    <table>
        <caption>学生成绩表caption>
        <thead>
            <tr>
                <th>学号th>
                <th>姓名th>
                <th>成绩th>
            tr>
        thead>
        <tbody>
            <tr>
                <td>1td>
                <td>张三td>
                <td>88td>
            tr>            <tr>
                <td>1td>
                <td>李四td>
                <td>98td>
            tr>            <tr>
                <td>3td>
                <td>王五td>
                <td>68td>
            tr>
        tbody>
        <tfoot>

        tfoot>
    table>
body>
html>

效果预览:
为table表格设置合并边框_第2张图片

你可能感兴趣的:(CSS,css合并边框,表格合并边框)