我正在尝试创建一个这样的表，我已经做了所有的工作，但我不能使表行下面的虚线响应。
I want to acheive this
这是我使用的CSS。

th {
  padding: 10px;
}

table th {
  background-color: #ebf2fb;
}

table th:first-child {
  border-radius: 10px 0 0 10px;
}

table th:last-child {
  border-radius: 0 10px 10px 0;
}

table {
  row-gap: 15px;
  border-collapse: separate;
  border-spacing: 0 5px;
  margin-top: 0px; /* correct offset on first border spacing if desired */
}
td {
  border: solid 1px transparent;
  border-style: solid none;
  padding: 10px;
  margin-top: 5px;
}

tr:hover .blue-border {
  border-width: 1px;
  border-color: #3585f9;
  border-style: solid none;
  background-color: #e7f1ff;
}

tr:hover .blue-border:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

tr:hover .blue-border:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

td:first-child {
  border-left-style: solid;
  border-top-left-radius: 10px;
  border-bottom-left-radius: 10px;
}

td:last-child {
  border-right-style: solid;
  border-bottom-right-radius: 10px;
  border-top-right-radius: 10px;
}

hr {
position:relative;
left:16px;
width:300%;
  border: none;
  border-top: 1px dashed #256bd1;
  color: #fff;
  background-color: #fff;
}

这是HTML，我也在用tailwind，用CSS来做tailwind做不好的事情。

<table className='w-full px-2 border-separate'>
              <thead className='text-[#292929] text-left my-10'>
                <tr>
                  <th className='pl-10 xl:w-[300px] 2xl:w-[500px]'>Company</th>
                  <th className='pl-10'>Service</th>
                  <th className='xl:w-[200px] 2xl:w-[300px]'>Stage</th>
                  <th className='pl-10'>Expiration Date</th>
                  <th className='pl-10'></th>
                </tr>
              </thead>
              <tbody className='section'>
                {data.map((deal) => (
                  <>
                    <tr
                      onClick={() => handleRowClick(deal.Id)}
                      className=' rounded-xl hover:bg-[#3585f980] hover:cursor-pointer'
                    >
                      <td className='pl-10 blue-border'>{deal.Name}</td>
                      <td className='pl-10 blue-border'>{deal.Type}</td>
                      <td className='blue-border'>
                        <Stage stage={deal.StageName} />
                      </td>
                      <td className='pl-10 blue-border'>
                        {deal.Contract_Expiration_Date__c}
                      </td>
                      <td className='pl-10 blue-border'>
                        <Link to={`/deal/${deal.Id}`}>
                          <img
                            alt='right arrow'
                            className='hover:bg-blue-300 rounded-3xl p-2'
                            src={RightArrow}
                          ></img>
                        </Link>
                      </td>
                    </tr>
                    <hr className='xl:w-[370%] 2xl:w-[295%] relative left-4' />
                  </>
                ))}
              </tbody>
            </table>

我试着在实际的表格行后面放一个空的表格行，但是不能使唯一的边框显示在底部或顶部。它显示了从一列到另一列的所有边框。