CODEWITHSUNDEEP
htmlcsshtml-table
magic bean
magic bean

Reputation: 797

How to make one extended <tr> in table

I have a table as you see in the picture: enter image description here

What I am trying to do is extend the date row till the end. So, I want blue background for whole row.

Here is my code for this:

<table class="table">
            <tbody>
            <tr class="list-heading"><td>DATE</td></tr>
            <tr v-for="(r, index) in filteredRows.slice(pageStart, pageStart + countOfPage)" class="list-content">
<!--                <th>{{ (currPage-1) * countOfPage + index + 1 }}</th>-->
                <td>{{ r.time }}</td>
                <td>{{ r.date }}</td>
                <td>{{ r.name }}</td>
            </tr>
            </tbody>
        </table>

I am using vue, but I dont think it is related to this. And here is my css:

table .list-heading {
    background-color: var(--main-title-color);
    color: #FFFFFF;
}

Upvotes: 0

Views: 1415

Answers (4)

Mukesh Kumar
Mukesh Kumar

Reputation: 44

You can try the following code snippet using colspan

<tr class="">
<td colspan="td-number">value</td>
</tr>
tr.list-content{
color: red;
background: blue;
}

Upvotes: -1

Ali
Ali

Reputation: 36

use this

<tr>
  <td colspan="3">DATE</td>
</tr>

Upvotes: 1

Loupeznik
Loupeznik

Reputation: 313

Try with the td colspan attribute. Something like this:

<tr class="list-heading"><td colspan="3">DATE</td></tr>

It should expand the td to occupy 3 columns, you may change the number of columns as needed.

Upvotes: 1

Martin
Martin

Reputation: 16433

You can use the colspan attribute of td to achieve this:

<tr class="list-heading"><td colspan="3">DATE</td></tr>

colspan specifies the number of columns in a table that a cell should span (literally column span).

There's some information about it here.

Upvotes: 3

Related Questions