'Is it possible to extend the borders of table data <td> to align with content that has been moved via negative margins?

I have a collapsible table, which opens and closes when clicking on Accounting. It requires a unique layout. I have added a checkbox to my collapsible rows, which must align with the Date column. I have shifted all my titles over with a negative margin, in order to group with the checkbox. Now, I need to extend the borders, so they appear underneath the titles again(see picture below). I have created a codesandbox for your review. Can anyone advise on the best method to extend the borders, so they align with the titles? Please note: My date column uses rowspans, so I don't believe adding padding-left will resolve the issue.

picture

Code Snippet:

<tbody>
          <tr>
            <td rowSpan="3" id="date">
              Date
            </td>
            <td colSpan="4">
              <label className="accounting-label" htmlFor="accounting">
                Accounting
              </label>
              <input
                type="checkbox"
                name="accounting"
                id="accounting"
                data-toggle="toggle"
                onClick={showNestedData}
              ></input>
            </td>
          </tr>
          <tr className="accounting-data hide">
            <td className="australia-data">
              <div className="flex-au-wrapper">
                <div className="au-checkbox-wrapper">
                  <input
                    type="checkbox"
                    id="au-checkbox"
                    name="subscribe"
                    value="newsletter"
                  ></input>
                </div>
                <div>Australia</div>
              </div>
            </td>
            <td>$3,544.00</td>
            <td>$5,834.00</td>
            <td>$10,583.00</td>
          </tr>
</tbody>
javascripthtmlcssreactjs


Solution 1:[1]

To extend table border you can give some padding,you can also you can select the one you want with :nth child

Solution 2:[2]

in codesandbox the bottom border already covered the checkbox and title 'Accounting'. So, if you also want to cover the Date then please add the following CSS code to yours

.accounting-data,
tr  {
  position : relative;
  /* border-bottom: 1px solid #ccc; */
}

th, td{
  border: 0;
}

 tr::before {
  content : "";
  display: block;
  position: absolute;
  width: calc(100vh + 150px);
  top: 0;
  background: #555;
  border-bottom: 1px solid #ccc;
  left: 0;
}

May it helps :)

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sheng Huang
Solution 2 Rajpal Singh

Related Questions