Tips for separating <td> tags within a series of <td>

I am working with the HTML code provided below.

 <tr>
     <td class="slds-cell-wrap" data-label="">Category</td>
     <td class="slds-cell-wrap break" data-label=""><strong> Test </strong></td>
     <td class="slds-cell-wrap" data-label="">Format</td>
     <td class="slds-cell-wrap break" data-label=""><strong>Test 1</strong></td>
</tr>

I am seeking to format the output in the following manner:

Category Format
Test     Test1

Please note that the 2nd <td> and the 4th <td> should be on a new line.

How can I accomplish this using CSS styling?

htmlcsshtml-table

Answer №1

To create a table without using CSS, simply use HTML. For the headers of the table, insert a <th> tag within a <tr> tag as shown below:

  <table>
  <tr>
    <th class="slds-cell-wrap" data-label="">Category</th>
    <th class="slds-cell-wrap" data-label="">Format</th>
  </tr>
  <tr>  
    <td class="slds-cell-wrap break" data-label=""><strong> Test </strong></td>
    <td class="slds-cell-wrap break" data-label=""><strong>Test 1</strong></td>
  </tr>
</table>

Answer №2

Using the CSS property display:grid can help with this layout.</p>
<p><div>
<div>
<pre class="snippet-code-css lang-css"><code>tr {
  display: grid;
  grid-template-columns: auto auto;
  column-gap: 0.5em;
}
td.break {
  grid-row: 2;
}
  
<table>
   <tr>
     <td class="slds-cell-wrap" data-label="">Category</td>
     <td class="slds-cell-wrap break" data-label=""><strong> Test </strong></td>
     <td class="slds-cell-wrap" data-label="">Format</td>
     <td class="slds-cell-wrap break" data-label=""><strong>Test 1</strong></td>
  </tr>
</table>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Swapping data between two HTML files and PHP

As I work on setting up a signup form for a MikroTik hotspot, I've encountered limitations with the device not supporting PHP. In order to pass the necessary variables from the device to an external PHP page where customer data will be saved and trial ...

javascriptphphtmlmysqlsession-variables

Struggling to implement the UI router into my Angular Framework

I've been working on a framework that is supposed to be router agnostic. While I've managed to make it work with ngRoute, I just can't seem to get it functioning with UI Router. Here's a snippet of the main app module: (function () { ...

javascriptjqueryhtmlangularjs

Try utilizing the 'id name ends with' parameter within the on() function for creating dynamic bindings

I need help with dynamically binding the change event to multiple select input fields that are generated within my form. The item field is generated with IDs like: id="id_form-0-item" id="id_form-1-item" id="id_form-2-item" ... Although I have attempte ...

javascriptjqueryhtml

Markdown boasts of a sturdy partially-horizontal line

Is there a way to create a partially colored line in Markdown? I attempted using the following code: <hr style="border:0.3px solid green; width:40%"> </hr> However, instead of a partial green line, I am seeing a full gray line. Any idea on w ...

htmlmarkdown

Is there a way to pass the ng-repeat value or ID to my dynamically appended element? If so, how can I achieve

I am working on a project where I have a table with 5 data entries retrieved from a select query. My goal is to extract the ng-repeat value and ID, then transfer it to another element. As a beginner in Angularjs and HTML, I would greatly appreciate any ass ...

javascriptjqueryhtmlangularjssql-server

There is excessive space beneath the text

I am struggling with aligning text vertically to match the chevrons. I have attempted various CSS properties like removing paddings/margins, setting line-height to 1, using text-decoration: none, text-align: center, and vertical-align: middle on my <p&g ...

css

Issue with login form in IONIC: Form only functions after page is refreshed

Encountering an issue with my Ionic login form where the submit button gets disabled due to invalid form even when it's not, or sometimes displays a console error stating form is invalid along with null inputs. This problem seems to have surfaced afte ...

htmlangularformstypescriptionic-framework

Tips for optimizing Slider Code to showcase an expanded selection of slides

I am currently troubleshooting a slider code on my ASP.NET website. After examining the HTML, JS, and CSS from the page theme, I noticed that only two slides are being displayed. However, when attempting to add a new slider HTML and adjusting the CSS for t ...

javascriptjqueryhtmlcss

CSS: Troubles with Element Widths

I'm dealing with a list item that contains an image, like so: <ul> <li> <img></img> </li> </ul> The image is not filling the entire width of the list item. Is there a way to make the list item shr ...

csswidth

Saving solely the content of an HTML list element in a JavaScript array, excluding the image source

One issue I am facing is with an unordered list in HTML which contains items like <ul id="sortable"> <li class="ui-state-default"><img src="images/john.jpg">John</li> <li class="ui-state-default"><img src="images/lisa.jpg ...

javascriptjqueryhtmlarraystext

Switch up the background hue of a multi-level dropdown menu in Bootstrap 5

Has anyone attempted to modify the background color in a multi-dropdown menu using Bootstrap 5? You can find the original code here. I am looking to change the background color for visited/active items in a multi-level dropdown menu. The code snippet belo ...

htmlcsstwitter-bootstrapbootstrap-5

Each Browser Approaches Simple Search Fields in its Own Unique Way

In the process of creating a search field with an input field and an svg icon, I encountered different browser behaviors in Chrome, Firefox, and IE11. Chrome – the preferred version https://i.sstatic.net/ikBgD.png Firefox https://i.sstatic.net/9lcqQ.pn ...

htmlcsssvgcross-browser

Ways to transfer data to a different PHP file without the need to navigate to the actual page

How can I make a button send information to another PHP folder while staying on the same page? <button class="btn btn-outline-dark w-60"><?php echo "<td> <a href='carrinho.php?acao=adc&id=$PegaID'>Adicionar ...

phphtmlmysql

Utilize the Twitter Bootstrap modal feature to play autoplaying Youtube videos that automatically pause when

Similar Question: How do I halt a video using Javascript on Youtube? I am curious about how I can utilize the modal feature in Twitter Bootstrap to automatically play a Youtube video, and when a user clicks the "close" button, it will cease the video ...

javascripthtmlyoutubetwitter-bootstrap

Incorporate a CSS design element in the lower right corner of the screen by adding a box

I'm looking to create a layout where a list of cards is displayed with maximize, minimize, and close buttons located at the bottom right of each card. The cards should be arranged from bottom right to left, but I'm having trouble achieving this p ...

htmlcssflexbox

Ensure that buttons are cropped when extending beyond the border of another DIV

My issue involves a main DIV with buttons contained within it. I am seeking a solution to ensure that the buttons are cut off at the edge of the DIV, similar to the concept illustrated in this image. In the image, the blue represents the body, the light gr ...

htmlcssz-indexbehind

How can I change the text color in a QTextBrowser using HTML in PyQt?

I've been attempting to customize the font color of HTML text within a created QTextBrowser. While I have successfully used basic HTML commands to adjust paragraphs and change font size, I am facing difficulties with setting font color. Below is the ...

htmlcsspyqtpyqt4qtextbrowser

The jQuery ajax request will only display the data in the HTML once

Hey there! I am facing an issue where, when I click on my button to make an ajax request, it works perfectly and displays the data on my select item. However, on clicking the button again, the data is fetched correctly but the select item shows the data t ...

javascriptjqueryhtmlajax

What is the reason for the error message saying "The prefix 'h' for the element 'h:head' is not bound"?

Below is the xhtml code I have created: <html> <h:head> <meta http-equiv="Content-Type" content="text/html; charset=Cp1252"/> </h:head> <h:body> <view> <h:form> <br/> ...

htmljsfxhtml

Can someone guide me on developing a similar design utilizing HTML canvas with HTML 5 technology?

Hey everyone, I could really use some assistance on creating a design with Html 5 canvas. My current issue is that the rectangles I'm trying to generate are overlapping and not fitting properly within the canvas. Below, you'll find both a referen ...

htmlcssreactjs