How can I insert a dotted line after a table row without using table rows border?

Question

I'm trying to create a table like this, I've done it all but I can't make the dotted line below the table row responsive.

I want to acheive this

This is the CSS I used.

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

This is the HTML, I'm using tailwind too, used CSS for the things tailwind can't do well.

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

I tried putting an empty table row after the actual one but can't make the only border to appear be the bottom or top one. it displays all the borders from column to column.

Answer 1

I'm not sure how to do it with a border or outline but this is one way to to it, it might help you. Check this link out. Another one could be done with svgs as a background.

tr {
  background-image: repeating-linear-gradient(0deg, #333333, #333333 2px, transparent 2px, transparent 6px, #333333 6px), repeating-linear-gradient(90deg, #333333, #333333 2px, transparent 2px, transparent 6px, #333333 6px), repeating-linear-gradient(180deg, #333333, #333333 2px, transparent 2px, transparent 6px, #333333 6px), repeating-linear-gradient(270deg, #333333, #333333 2px, transparent 2px, transparent 6px, #333333 6px);
  background-size: 0px 100%, 100% 2px, 0px 100% , 100% 2px;
  background-position: 0 0, 0 0, 100% 0, 0 100%;
  background-repeat: no-repeat;
}