时间戳

首页 > 解决方案 > HTML CSS 中的行

html - HTML CSS 中的行

问题描述

有人可以帮助在 HTML 中使用 CSS 实现这种类型的行吗？

这是它现在的样子：

这就是现在的样子

使用此代码实现：

table {
  margin: auto;
  font-size: 1em;
  font-weight: bold;
  width: 95%;
  color: green;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.219);
  border-collapse: separate;
  border-spacing: 30px 30px;
}
tr {
    background-color: white;
  border-collapse: none;
  cursor: pointer;
}
td {
  width: 250px;
  text-align: center;
  border: 0px solid black;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.295);
  border-radius: 20px;
  padding: 20px;
  font-size: 18px;
}
    <table id="usertab" class="table" >
      <tr>   
         <td class="rank"># 1</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 2</td>  
        <td> Name</td>
        <td>Canada</td> 
      </tr>
      <tr>
        <td class="rank"># 3</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 4</td>  
        <td> Name</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td class="rank"># 5</td>  
        <td> Name</td>
        <td>Canada</td>  
      </tr>
      <tr>
        <td class="rank"># 6</td>  
        <td> Lucia Burgess</td>
        <td>Canada</td>
      </tr>
      
    </table>

这就是我希望它的样子：

这就是我想要的样子

当我尝试更改边框间距时，它看起来很糟糕。目标是让它看起来像单行，但行之间有空间。

标签： htmlcss

解决方案

您应该将box-shadow和移动border-radius到tr。
删除也border-collapse:none;上tr。

table {
  margin: auto;
  font-size: 1em;
  font-weight:bold;
  width: 95%;
  color: green;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.219);
  border-collapse: separate;
  border-spacing: 30px 30px;
}
tr {
  cursor: pointer;
  box-shadow: 0 0 20px rgba(0, 0, 0, 0.295);
  border-radius: 20px;
}
td {
  width: 250px;
  text-align: center;
  padding: 20px;
  font-size: 18px;
}
<table id="usertab" class="table" >
      <tr>   
         <td class="rank"># 1</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 2</td>  
        <td> Name</td>
        <td>Canada</td> 
      </tr>
      <tr>
        <td class="rank"># 3</td>  
        <td> Name</td>
        <td>Canada</td>    
      </tr>
      <tr>
        <td class="rank"># 4</td>  
        <td> Name</td>
        <td>Canada</td>
      </tr>
      <tr>
        <td class="rank"># 5</td>  
        <td> Name</td>
        <td>Canada</td>  
      </tr>
      <tr>
        <td class="rank"># 6</td>  
        <td> Lucia Burgess</td>
        <td>Canada</td>
      </tr>
      
    </table>

推荐阅读