Horizontal rule located within a table but spanning the entire width

Question

Horizontal rule located within a table but spanning the entire width

I wrote the following code:

  <table>
    {item.awards.map((obj,i) => 
    <tbody>
        <tr>
            <td>Name</td>
            <td>:</td>
            <td>{obj.title}</td>
        </tr>
        <tr>
            <td>Date</td>
            <td>:</td>
            <td>{obj.award}</td>
        </tr>
        {i !== item.awards.length-1 ? <hr /> : ''}
    </tbody>
    )}
  </table>

The table displays correctly with a separator (<hr/>) after each block. However, the issue now is that the hr length doesn't span the full width. I can't set the table to be 100% width as it will impact the td elements.

javascript html css reactjs

Answer 1

Answer №1

Using an hr directly inside a tbody is not valid. According to the content model of tbody, only tr elements (and scripts) are allowed. Even if it appears to work in one browser, there is no guarantee it will work in another or even in the next version of the same browser.

To resolve this issue, you should place the hr within a tr, which means placing it inside a td or th:

{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}

You can then customize the style of the hr using CSS to adjust its width as needed. Here is an example of how you could style the separator rows and the hr:

Name	:	{obj.title}
Date	:	{obj.award}

Name	:	{obj.title}
Date	:	{obj.award}

Name	:	{obj.title}
Date	:	{obj.award}

(On a side note: Using null is preferable over '' for the third operand of that conditional operator.)

Answer 2

Using an hr directly inside a tbody is not valid. According to the content model of tbody, only tr elements (and scripts) are allowed. Even if it appears to work in one browser, there is no guarantee it will work in another or even in the next version of the same browser.

To resolve this issue, you should place the hr within a tr, which means placing it inside a td or th:

{i !== item.awards.length-1 ? <tr><td colspan="3"><hr /></td></tr> : null}

You can then customize the style of the hr using CSS to adjust its width as needed. Here is an example of how you could style the separator rows and the hr:

Name	:	{obj.title}
Date	:	{obj.award}

Name	:	{obj.title}
Date	:	{obj.award}

Name	:	{obj.title}
Date	:	{obj.award}

(On a side note: Using null is preferable over '' for the third operand of that conditional operator.)

Horizontal rule located within a table but spanning the entire width

Answer №1

Similar questions

5 Simple Steps for Adding a Value to a Popup Textbox Automatically

Change the background color according to the user's input text

The file '.manage.py' cannot be accessed due to error code [Errno 2], as the file or directory does not exist

What is the process of calculating the average of JSON data and looping through it multiple times using Javascript?

The submit button is unable to initiate the ajax function

Props used in styled components are effective, although they may trigger a warning message stating, "Warning: Received `true` for a non-boolean attribute `cen`."

Troubleshooting Vue.js Error: Uncaught ReferenceError - jQuery Undefined

Executing php class method through ajax with jQuery without requiring a php handler file

Encountered an error stating "Cannot access property FindAll() of undefined" while working with a node/express JS app

Activate Material-ui menu on hover event

Assign the callback function to execute when the select element loses focus

Focusing on particular jQuery elements that share the same class names

Dealing with cross-origin error issues when using json.parse in React / MERN development

What is the best way to prevent certain bootstrap classes from being applied across all elements?

The console logs indicate success for every call, but unfortunately Twitter is not displaying the retweets

Comparing the positions of elements in Selenium WebDriver with PHP

Using two different colors in text with CSS

What could be causing this `even` function to malfunction when utilizing getElementById?

How to align a Bootstrap form to the center

Retrieve the $scope object within an isolated directive