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

user_10015739 0
Viewed 32

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>
reactjs css html javascript
2 Answers

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

user_186097090

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

user_41790250
Related