I have following html for my table, but it is adding horizontal scroll on small screen...please help me..how to remove that scroll and make table completely responsive. Thanks.
<div class="table-responsive col-12 col-sm-12 col-lg-12">
<table class="table table-hover table-bordered text-capitalize" style="margin-top: 20px">
<tr style="background-color :black; color: white">
<th>Sr.No</th>
<th>Name</th>
<th>Expense Detail</th>
<th>Expense Date</th>
<th>Amount</th>
</tr>
<tr>
<td>1</td>
<td>aamir shoeb</td>
<td>abc</td>
<td>2016-04-09</td>
<td>25</td>
</tr>
<tr>
<td>2</td>
<td>aamir shoeb</td>
<td>hjk</td>
<td>2016-04-09</td>
<td>57</td>
</tr>
<tr>
<td>3</td>
<td>aamir shoeb</td>
<td>uuu</td>
<td>2016-04-10</td>
<td>56</td>
</tr>
<tr class="success">
<td colspan="3" style="visibility: hidden"></td>
<td>Total</td>
<td>1222</td>
</tr>
</table>
</div>
There are many ways to deal with table and responsive needs. Here is one way to do it, removing horizontal scroll on mobile as you wish :
See it here
CSS
#media (max-width:480px ){
/* Force table to not be like tables anymore */
table, thead, tbody, th, td, tr {
display: block;
}
tr td {
text-align: center;
border-bottom: 1px solid #ccc;
border-left: 1px solid #ccc;
border-right: 1px solid #ccc;
}
tr td:last-child {
border-bottom: 3px solid #333;
}
}
Related
I'm a person who just started to learn coding through a basic HTML book.
Speaking the problem i faced directly,
I can't see the cell line on the brower without knowing why i can't see,
because I just copied the code which wrote on the book i studied on my code editor.
As I known, if I write the <table>code , there should be a cell line on the brower,
but I wasn't able to see that there...
If there is anyone who can explain to me, Please help me..
Thanks
Here is the all code.
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jake</td>
<td>24</td>
<td>Korea</td>
</tr>
<tr>
<td>Jane</td>
<td>24</td>
<td>Korea</td>
</tr>
</tbody>
</table>
Image:
There are cells & rows but can't see because there is no border for them.
You Can Style Your Table with CSS or put just <table border="1">
Snippet: Styled Table
.table {
width: 100%;
margin-bottom: 1rem;
background-color: transparent;
border: 1px solid #dee2e6
}
.table td,
.table th {
padding: .75rem;
vertical-align: top;
border-top: 1px solid #dee2e6
}
.table thead th {
vertical-align: bottom;
border-bottom: 2px solid #dee2e6
}
.table tbody+tbody {
border-top: 2px solid #dee2e6
}
<table class="table">
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Country</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jake</td>
<td>24</td>
<td>Korea</td>
</tr>
<tr>
<td>Jane</td>
<td>24</td>
<td>Korea</td>
</tr>
</tbody>
</table>
I want to create a table with only partly separated borders. The borders above and below the thead should be without spaces in between. But others in it should be separated by a small space.
Unfortunately, the border-spacing style only applies to the whole table: https://developer.mozilla.org/en-US/docs/Web/CSS/border-spacing
For example, in the following I want to have space only between the border-top of h2.1 and h2.2. Is that possible?
HTML:
<table>
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
CSS:
table {
border-collapse: separate;
}
th,
td {
vertical-align: top;
}
thead tr:first-child th {
border-top: 2px solid;
}
thead tr:not(:first-child) th {
border-top: 1px solid;
}
tbody tr:first-child td {
border-top: 1px solid;
}
tbody tr {
border-top: 1px solid;
}
Fiddle: https://jsfiddle.net/6ov4hadd/
Edit
Here is a more sensible example.
Fiddle: https://jsfiddle.net/Lnk929q4/
I want to look it like a "book table":
You can try using two different tables for head part and body part. Something like this
https://jsfiddle.net/6ov4hadd/1/
<table id = "table1">
<thead>
<tr>
<th rowspan="2">h1</th>
<th colspan="2">h2</th>
</tr>
<tr>
<th>h2.1</th>
<th>h2.2</th>
</tr>
</thead>
</table>
<table>
<tbody>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
<tr>
<td>b1</td>
<td>b2.1</td>
<td>b2.2</td>
</tr>
</tbody>
</table>
I'm trying to apply a border to all tr's in a thead.
Css(stylus):
table
thead
tr
border: solid #000;
border-width: 0 10px;
According to chrome the styles get applied, but the border doesn't actually show up:
tr need its table to have border-collapse: collapse for border to work
table.first {
border-collapse: separate; /* property default */
}
table.second {
border-collapse: collapse;
}
table thead tr {
border-bottom: 2px solid gray;
}
/* for this demo only */
div {
margin: 25px 20px 10px;
text-decoration: underline;
}
<div>This table's tr (in thead) has no border</div>
<table class="first">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
<div>This table's tr (in thead) has border</div>
<table class="second">
<thead>
<tr>
<td>Left Head</td>
<td>Right Head</td>
</tr>
</thead>
<tbody>
<tr>
<td>Left</td>
<td>Right</td>
</tr>
</tbody>
</table>
thead {color:green;}
tbody {color:blue;}
tfoot {color:red;}
table, th, td {
border: 1px solid black;
}
<table>
<thead>
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Sum</td>
<td>$180</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>January</td>
<td>$100</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
</tr>
</tbody>
</table>
i'm not a css master but i usually write border properties in one line:
border: 10px solid #000;
I have one table.
I would like to set different cell width for different rows.
For example, at the third row, I would like to set the EQUAL column width of 3rd and 4th column. No matter the 3rd column has text overflow.
original output:
expected output:
Is it possible to do so? Thanks you very much!
<style type="text/css"> .tg {border-collapse:collapse;border-spacing:0;border-color:#aabcfe;margin:0px auto;} .tg td{font-family:Arial, sans-serif;font-size:14px;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#669;background-color:#e8edff;} .tg th{font-family:Arial, sans-serif;font-size:14px;font-weight:normal;padding:10px 5px;border-style:solid;border-width:1px;overflow:hidden;word-break:normal;border-color:#aabcfe;color:#039;background-color:#b9c9fe;} .tg .tg-s6z2{text-align:center} .tg .tg-vn4c{background-color:#D2E4FC} .tg .tg-0ord{text-align:right} .table {table-layout: fixed;} </style>
<table class="tg" table width="500"> <tr>
<th class="tg-s6z2" colspan="6">Results</th> </tr> <tr>
<td class="tg-vn4c" width="5%">No</td>
<td class="tg-vn4c" width="15%">Competition</td>
<td class="tg-vn4c" width="20%">John</td>
<td class="tg-vn4c" width="20%">Adam</td>
<td class="tg-vn4c" width="20%">Robert</td>
<td class="tg-vn4c" width="20%">Paul</td> </tr> <tr>
<td class="tg-031e">1</td>
<td class="tg-031e">Swimming</td>
<td class="tg-0ord" colspan="2">line1<br>line 2<br>line 3<br>12345678901234567890123451234567890<br><br></td>
<td class="tg-0ord" colspan="2">ABCD<br><br></td> </tr> </table>
To answer the question:
Technically, yes it is possible with tables using empty cells, colspans and manipulating borders. In fact, I made it.
Don't do this
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: solid 1px #000;
padding: 10px;
}
.noborder {
border: none;
border-top: solid 1px #000;
border-bottom: solid 1px #000;
}
.leftborder {
border-left: solid 1px #000
}
.rightborder {
border-right: solid 1px #000
}
<h1>Don't do this!</h1>
<table>
<tr>
<th>No</th>
<th>Comp</th>
<td>John</td>
<td class="noborder">Matthew</td>
<td class="noborder"></td>
<td>Mark</td>
<td>Luke</td>
</tr>
<tr>
<td>1</td>
<td>Swimming</td>
<td colspan="2" class="noborder">Details</td>
<td colspan="3" class="noborder leftborder rightborder">Details</td>
</tr>
</table>
Practically though, this is overly complex and impossible to maintain; it also defeats the purpose of a table.
Possible alternative
This is a possible idea, though it could still be difficult to maintain and I don't know exactly what you are trying to display.
Sticking with a table
Depending on what information you are trying to display, you could use a table for this with a different layout. The rowspans join the information relevant to each name.
table {
width: 100%;
border-collapse: collapse;
}
th,
td {
border: solid 1px #000;
padding: 10px;
}
<table>
<thead>
<tr>
<th scope="col">No</th>
<th scope="col">Competition</th>
<th scope="col">Name</th>
<th scope="col">Details 1</th>
<th scope="col">Details 2</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row" rowspan="5">1</th>
<th scope="row" rowspan="5">Swimming</th>
<td>John</td>
<td rowspan="3">This info is relevant to John, Steven and Mark</td>
<td rowspan="2">This info is relevant to John and Steven</td>
</tr>
<tr>
<td>Steven</td>
</tr>
<tr>
<td>Mark</td>
<td rowspan="2">This info is relevant to Mark and Peter</td>
</tr>
<tr>
<td>Peter</td>
<td>The info is only relevant to Peter</td>
</tr>
</tbody>
</table>
you can use style sheet that sounds like hacks to this.. because doing this in table property isn't possible
see this jsfiddle
Why doesn't the border show around tbody in the following? I tried rules="groups" and the border appears, but only between the two tbody sections and it is collapsed.
table.sectioned tbody {
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
<table class="sectioned">
<tbody>
<tr><td colspan="2"><b>General Data</b></td></tr>
<tr><td>Tail Number</td><td>N0809021</td></tr>
<tr><td>Type of Ownership</td><td>personal</td></tr>
<tr><td>Type of Aircraft</td><td>aircraft under 13,000 pounds</td></tr>
<tr><td>Year of Manufacture</td><td>1999</td></tr>
<tr><td>Use of Aircraft</td><td>private</td></tr>
<tr><td>Start Date</td><td></td></tr>
<tr><td>Policy Length</td><td>6 months</td></tr>
</tbody>
<tbody>
<tr><td colspan="2"><b>Additional Aircraft Information</b></td></tr>
<tr><td>Manufacturer</td><td></td></tr>
<tr><td>Model</td><td></td></tr>
<tr><td>Engine Make</td><td></td></tr>
<tr><td>Number of Seats</td><td></td></tr>
</tbody>
</table>
Add:
table {border-collapse: collapse;}
FIDDLE
Add display:block to your tbody style. Try this
tbody{
display:block;
border: 2px solid black;
border-collapse: separate;
border-spacing: 4px;
}
You can test it out on this fiddle
Use box-shadow instead of border. It works no matter which value of border-collapse was applied. In addition, you can also apply border-radius to it.
tbody {
box-shadow: 0 0 0 1px black;
border-radius: 5px;
}
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody>
<tr>
<td>Jill</td>
<td>Smith</td>
</tr>
<tr>
<td>Eve</td>
<td>Jackson</td>
</tr>
</tbody>
</table>
.table_body, .tbody_td, .tbody_th
{ border: 1px solid black; }
.table_body { border-collapse: collapse; }
<table>
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
</tr>
</thead>
<tbody class="table_body">
<tr>
<td class="tbody_td">Jill</td>
<td class="tbody_td">Smith</td>
</tr>
<tr>
<td class="tbody_td">Eve</td>
<td class="tbody_td">Jackson</td>
</tr>
</tbody>
</table>