How to create a slash in table cell

Question

I'm creating a table and want to design the table as below. Can anyone tell me how to do like that? or any key word can search online?

enter image description here

score 5 · Accepted Answer · answered Nov 18 '11 at 01:54

5

The easiest way to do this would be to create an image for the diagonal line and then set it as the cell's background. You'll have to play around with it to get it looking right, but that should work for you.

There is no built-in HTML or CSS property to set this.

answered Nov 18 '11 at 01:54

thanks Shark. but this is not a good idea since i will dynamically create the table. image only can be static use. but still, thanks for replay. – 456qwe123asd Nov 18 '11 at 03:52
Hey guys, I just find out another similar post in http://stackoverflow.com/questions/8127035/how-to-create-a-diagonal-line-within-a-table-cell this is what i want for. Maybe you all can go the side and check it out. It is relate to Javascript and Css. Thanks all of you. – 456qwe123asd Nov 18 '11 at 03:58

score 1 · Answer 2 · answered Nov 18 '11 at 01:52

1

Perhaps a background image? A cell contains 2 absolutely positioned elements - title/subtitle.

answered Nov 18 '11 at 01:52

Mārtiņš Briedis

17,396
5
54
76

thanks Bridis. a static image will not fulfill in this dynamic table. but thanks for replay. – 456qwe123asd Nov 18 '11 at 03:54
Hey guys, I just find out another similar post in http://stackoverflow.com/questions/8127035/how-to-create-a-diagonal-line-within-a-table-cell this is what i want for. Maybe you all can go the side and check it out. It is relate to Javascript and Css. Thanks all of you. – 456qwe123asd Nov 18 '11 at 03:57

score 1 · Answer 3 · answered Nov 18 '11 at 01:56

1

a reasonably simple way would be to create and image and place it in your table cell.

answered Nov 18 '11 at 01:56

tmjam

1,029
2
12
25

Hey guys, I just find out another similar post in http://stackoverflow.com/questions/8127035/how-to-create-a-diagonal-line-within-a-table-cell this is what i want for. Maybe you all can go the side and check it out. It is relate to Javascript and Css. Thanks all of you. – 456qwe123asd Nov 18 '11 at 03:58

score 0 · Answer 4 · answered Dec 13 '21 at 11:44

If you only need to add a line, you can use only css and html to achieve it.

Example below:

.slope{
    position: relative;
    width: 1em;
    border-bottom: solid 1px black;
    -o-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

table, th, td {
  border: 1px solid black;
}

<table class="table">
    <thead>
        <tr>
            <th scope="col"><div class="slope"></div></th>
            <th scope="col">First</th>
            <th scope="col">Last</th>
            <th scope="col">Handle</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">1</th>
            <td>Mark</td>
            <td>Otto</td>
            <td>@mdo</td>
        </tr>
        <tr>
            <th scope="row">2</th>
            <td>Jacob</td>
            <td>Thornton</td>
            <td>@fat</td>
        </tr>
        <tr>
            <th scope="row">3</th>
            <td colspan="2">Larry the Bird</td>
            <td>@twitter</td>
        </tr>
    </tbody>
</table>

How to create a slash in table cell

4 Answers4