【css】css设置表格样式-边框线合并

<style>
table, td, th {
  border: 1px solid black;//设置边框线
}

table {
  width: 100%;
}

td {
  text-align: center;//设置文本居中
}
style>
head>
<body>


<table>
  <tr>
    <th>Firstnameth>
    <th>Lastnameth>
    <th>Savingsth>
  tr>
  <tr>
    <td>Billtd>
    <td>Gatestd>
    <td>$100td>
  tr>
  <tr>
    <td>Stevetd>
    <td>Jobstd>
    <td>$150td>
  tr>
table>

body>

渲染效果:
在这里插入图片描述
渲染出来的效果不好看,边框线存在两条,现在需要将它们合并,添加 border-collapse: collapse。

<style>
table, td, th {
  border: 1px solid black;
}

table {
  border-collapse: collapse;//添加边框线合并
  width: 100%;
}

td {
  text-align: center;
}
style>
head>
<body>


<table>
  <tr>
    <th>Firstnameth>
    <th>Lastnameth>
    <th>Savingsth>
  tr>
  <tr>
    <td>Billtd>
    <td>Gatestd>
    <td>$100td>
  tr>
  <tr>
    <td>Stevetd>
    <td>Jobstd>
    <td>$150td>
  tr>
table>

body>

渲染效果:
在这里插入图片描述

你可能感兴趣的:(前端,css,前端)