I want that my background-image applies fully to the table borders, but it doesn't really work, it only applies to the center of the table borders.
It doesn't work without
border-collapse: separate;
So I don't know what else to do.
Yes, im a CSS and HTML beginner.
tbody {
color: black;
}
th {
color: black;
}
h1 {
color: black;
}
.table, .table-bordered{
border-spacing: 4px;
border-collapse: separate;
background-image: url('http://fs5.directupload.net/images/170604/sahdx5gv.png');
background-size: 100% auto;
background-repeat: repeat;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border: none;
background-color: #fff;
}
Heres my HTML CODE:
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<head>
<link rel="stylesheet" href="shitfuck.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
<h1 class="text-center">OpSec Leaderboard</h1>
<table class="table table-bordered"></br>
<thead>
<tr>
<th>Place</th>
<th>Username</th>
<th>Rank</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>username</td>
<td>rank</td>
<td>1337</td>
</tr>
<tr>
<td>2</td>
<td>username</td>
<td>rank</td>
<td>1337</td>
</tr>
<tr>
<td>3</td>
<td>username</td>
<td>rank</td>
<td>1337</td>
</tr>
</tbody>
</table>
</div>
</div>
You just want a solid background, so remove the background image properties and just use background-color: blue; or background: blue; for short.
tbody {
color: black;
}
th {
color: black;
}
h1 {
color: black;
}
.table, .table-bordered{
border-spacing: 4px;
border-collapse: separate;
/*
background-image: url('http://fs5.directupload.net/images/170604/sahdx5gv.png');
background-size: cover;
background-repeat: repeat;
background-position: center center;
*/
background: blue;
}
.table > thead > tr > th,
.table > tbody > tr > th,
.table > tfoot > tr > th,
.table > thead > tr > td,
.table > tbody > tr > td,
.table > tfoot > tr > td {
border: none;
background-color: #fff;
}
Heres my HTML CODE:
<!DOCTYPE html>
<!-- Latest compiled and minified CSS -->
<head>
<link rel="stylesheet" href="shitfuck.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<div class="container">
<h1 class="text-center">OpSec Leaderboard</h1>
<table class="table table-bordered"></br>
<thead>
<tr>
<th>Place</th>
<th>Username</th>
<th>Rank</th>
<th>Points</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>username</td>
<td>rank</td>
<td>1337</td>
</tr>
<tr>
<td>2</td>
<td>username</td>
<td>rank</td>
<td>1337</td>
</tr>
<tr>
<td>3</td>
<td>username</td>
<td>rank</td>
<td>1337</td>
</tr>
</tbody>
</table>
</div>
</div>
Related
I am an HTML/CSS Noob and this is my first time making a website. The issue I can not seem to figure out is how I can get my table to "fit" in mobile view. As you can see the table does cuts off at the bottom and I want to have the entire table fit in the mobile view.
Normal View
Table Mobile view
table {
font-family: 'Pathway Gothic One', sans-serif;
width: 100%;
border-collapse: collapse;
margin-bottom: 10px;
font-size: 18px;
}
td, th {
border: 1px solid black;
text-align: left;
padding: 8px;
}
tr:nth-child(even) {
background-color: lightgray;
}
#media screen and (max-width: 767px) {
.left2, .main2 {
width: 100%;
}
thead {
display: none;
}
td {
display: block;
}
td:first-child {
background-color: black;
color: white;
}
td:nth-child(1)::before {
content: "Repair Type"
}
td {
text-align: center;
}
td::before {
float: left;
}
}
<table>
<thead>
<tr>
<th>Repair Type</th>
<th>Price</th>
<th>Turnaround Time</th>
</thead>
<tbody>
<tr>
<td>Battery Replacement</td>
<td>$50 - $100</td>
<td>Same Day</td>
</tr>
<tr>
<td>Camera Replacement</td>
<td>$30 - $105</td>
<td>Same Day</td>
</tr>
<tr>
<td>Charging Port Repair</td>
<td>$25 - $100</td>
<td>Same Day</td>
</tr>
<tr>
<td>Diagnostic</td>
<td>Free</td>
<td>Same Day</td>
</tr>
<tr>
<td>Ear Piece Replacement</td>
<td>$80</td>
<td>Same Day</td>
</tr>
<tr>
<td>Home Button Replacement - Select Models Only</td>
<td>$50 - $150</td>
<td>Same Day</td>
</tr>
<tr>
<td>Screen Repair</td>
<td>$30 - $150</td>
<td>Same Day</td>
</tr>
<tr>
<td>Water Damage Repair</td>
<td>$50 - $150</td>
<td>Same Day</td>
</tr>
<tr>
<td>Virus Removal</td>
<td>$80</td>
<td>Same Day</td>
</tr>
</tbody>
</table>
you can use the #media query for the table
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
#media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
.table-responsive > .table {
margin-bottom: 0;
}
.table-responsive > .table > thead > tr > th,
.table-responsive > .table > tbody > tr > th,
.table-responsive > .table > tfoot > tr > th,
.table-responsive > .table > thead > tr > td,
.table-responsive > .table > tbody > tr > td,
.table-responsive > .table > tfoot > tr > td {
white-space: nowrap;
}
}
what it does is that it looks for the display size and once a certain size is reached it triggers the CSS relative to that screen size, this is completely user-defined and you can modify it however you want
How to we make the HTML table to responsive without using bootstrap or JQuery, it has more than eight-column.
I'm Using Percentage for each column even its not coming responsive when we increase the text
Scroll coming at the bottom. how to avoid scroll, I don't want to use the Unorder list or div elements
body{
font-family: arial, sans-serif;
font-size:12px
}
.text-to-right {
text-align: right;
}
.text-to-left {
text-align: left;
padding-left: 1rem;
}
table {
width: 100%;
border-left: 1px solid #f3f1f1;
border-bottom: 1px solid #f3f1f1fa;
border-spacing: 0;
}
.table-bordered > tbody > tr > td,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > td,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > thead > tr > th {
border-left: 1px solid #f3f1f1;
border-bottom: 1px solid #d2cecefa;
/*box-shadow: 0 2px 4px 0 rgba(241, 230, 230, 0.16), 0 2px 10px 0 rgba(247, 245, 245, 0.12);*/
box-shadow: 0 1px 1px 0 #f3f1f1,0 1px 1px 0 #f3f1f1;
}
.table-bordered > tbody > tr > td:first-child,
.table-bordered > tbody > tr > th:first-child,
.table-bordered > tfoot > tr > td:first-child,
.table-bordered > tfoot > tr > th:first-child,
.table-bordered > thead > tr > td:first-child,
.table-bordered > thead > tr > th:first-child {
border-left-width: 0;
}
.table-bordered tbody tr td:last-child,.table-bordered thead tr th:last-child {
border-right: 1px solid #f3f1f1;;
}
.table-bordered > thead > th:last-child {
border-right: 1px solid #f3f1f1;
}
th {
padding: 1rem 0;
background: #192b4b;
color: #fff;
font-size: 1.3rem;
font-weight: normal;
border-left: 1px solid #f3f1f1;
}
td {
padding: 1rem;
text-transform: capitalize;
color: #6b5e5e;
}
.table-bright-data {
color: #007dc5;
font-size: 1.8rem;
font-family: 'Roboto Condensed', Arial, sans-serif;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<table class="table-bordered">
<thead>
<tr>
<th width="05%">
S.No
</th>
<th class="text-to-left" width="23%">Name</th>
<th width="10%">Code</th>
<th width="12%">Type</th>
<th width="10%"> Profile</th>
<th width="13%">Time</th>
<th width="10%">Size</th>
<th width="11%">Date</th>
</tr>
</thead>
<tbody>
<tr>
<td class="align-center">
1
</td>
<td class="text-to-left table-bright-data">Responsive layout</td>
<td class="text-to-left">LDHSNSJ734674</td>
<td class="text-to-left">Fixed Interest </td>
<td class="text-to-left">high </td>
<td class="text-to-right">No minimum </td>
<td class="text-to-right">0 </td>
<td class="text-to-right">05-Dec-2001 </td>
</tr>
<tr>
<td class="align-center">
2
</td>
<td class="text-to-left table-bright-data">Responsive layout</td>
<td class="text-to-left">DHEYE933</td>
<td class="text-to-left">Responsive layout </td>
<td class="text-to-left"> </td>
<td class="text-to-right">No minimum </td>
<td class="text-to-right">0 </td>
<td class="text-to-right">05-Dec-2001 </td>
</tr>
</tbody>
</table>
</body>
</html>
You could collapse a table like this
CSS
#media (max-width: 1024px) {
.collapse {
display: block;
}}
HTML
<td class="collapse">
Content
</td>
<td class="collapse">
Content
</td>
I would add multiple classes with different #media (max-width: xxx) so they don't collapse all at once. How you want to collapse them, and in what order you should figur out yourself.
You can look over here https://css-tricks.com/responsive-data-tables/ if you got any more questions.
Personally I like using div over tables, e.g: http://www.responsivegridsystem.com/
I have a blog on Wordpress and I want to create a stylish colourful table on my blog please. Suggest me code for my blog
As #Alex pointed out, the material color palette is a modern and nice way to get colors. All you would need to do is apply it to the different segments of your table.
.myTable {
width: 500px;
border-collapse: collapse;
border-bottom: 1px solid #f44336;
font-family: sans-serif;
}
/* Header */
.myTable thead th {
background: #f44336;
color: #fff;
padding: 3em 1em 1em 1em;
font-weight: 400;
text-align: left;
}
.myTable thead th:nth-child(1) {
font-weight: 600;
}
/* Rows */
.myTable tbody tr td {
padding: 1em;
}
.myTable tbody tr:nth-child(even) td {
background: #ffcdd2;
}
.myTable tbody tr td:nth-child(1) {
font-weight: 600;
}
<table class="myTable">
<thead>
<tr>
<th>Row 1</th>
<th>Row 2</th>
<th colspan="2">Row 3 and 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>1,1</td>
<td>1,2</td>
<td>1,3</td>
<td>1,4</td>
</tr>
<tr>
<td>2,1</td>
<td>2,2</td>
<td>2,3</td>
<td>2,4</td>
</tr>
<tr>
<td>3,1</td>
<td>3,2</td>
<td>3,3</td>
<td>3,4</td>
</tr>
<tr>
<td>4,1</td>
<td>4,2</td>
<td>4,3</td>
<td>4,4</td>
</tr>
</tbody>
</table>
I have an HTML table with another table embedded in it like:
table.index {
border-radius: 10px;
border: solid 1px #61a2d1;
border-spacing: 0;
}
table.index > thead > tr:first-child {
background-color: #61a2d1;
}
table.index > thead > tr:first-child > td:first-child {
border-top-left-radius: 10px;
}
table.index > thead > tr:first-child > td:last-child {
border-top-right-radius: 10px;
}
table.index > thead td {
font-weight: bold;
text-align: center;
}
table.index > tr:nth-child(3) {
background-color: rgba(97, 162, 209, 0.5);
}
table.index > tr:hover {
background-color: #ffda6d;
}
table.index > tbody > tr:last-child td:first-child {
border-bottom-left-radius: 10px;
}
table.index > tbody > tr:last-child td:last-child {
border-bottom-right-radius: 10px;
}
table.index .no-right-borrder {
border-right: none;
}
table.index .no-left-border {
border-left: none;
text-align: right;
}
table.details {
margin: 0;
padding: 0;
border: solid 1px #61a2d1;
border-spacing: 0;
}
<table class="index" style="width:100%">
<thead>
<tr>
<td style="width:2%"></td>
<td></td>
<td></td>
<td></td>
</tr>
</thead>
<tbody>
<tr>
<td class="no-right-borrder" style="vertical-align:middle"><span class="fa fa-caret-right fa-lg"></span></td>
<td class="no-left-border" style="text-align:left;"></td>
<td class="no-right-borrder" style="text-align:center"></td>
<td class="no-left-border"></td>
</tr>
<tr>
<td colspan="4" style="padding:0;margin:0">
<table class="details" style="width:100%">
<tbody>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
<tr>
<td colspan="2"><label for=""></label></td>
<td colspan="2"></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
When I open this page, the cells in the table with the class details have rounded corners just like the cells in the table with the class index.
I've used the direct child selector to indicate that I only wanted the routed borders to be applied to direct children of a table with the index class, so I'm not sure why it's happening. When I examine the DOM in Google Developer Tools, it tells me that the border-radius attribute is coming from the .index class. What do I need to do to stop that from happening?
edit: This is what I'm seeing on my local machine. CSS code is copied exactly from my code. Table was simplified because it's auto-generated, but the classes are applied identically.
I suspect you need to change table.index > tbody > tr:last-child td:first-child into table.index > tbody > tr:last-child > td:first-child (putting the direct descendant selector between tr > td), and the same for the td:last-child selector that directly follows.
I need your help.
It seems that my TD cell is not respecting the overflow: hidden in the CSS. I've done everything recommended with the fixed layout of the table as well as specifying the widths of the TH's and TD's
Any ideas?
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*------------------------------------------------------------------
Table Style
------------------------------------------------------------------ */
table a:link {
color: #666;
font-weight: bold;
text-decoration:none;
}
table a:visited {
color: #999999;
font-weight:bold;
text-decoration:none;
}
table a:active,
table a:hover {
color: #bd5a35;
text-decoration:underline;
}
table {
font-family:Arial, Helvetica, sans-serif;
color:#666;
font-size:12px;
background:#eaebec;
border-collapse:collapse;
border-spacing: 0;
table-layout: fixed;
}
table th {
padding:10px 10px 10px 10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
width: 160px;
background: #ededed;
}
table th:first-child {
text-align: left;
}
table tr:first-child th:first-child {
border-left: 0;
}
table tr {
text-align: center;
}
table td:first-child {
text-align: left;
border-left: 0;
}
table td {
padding:10px;
border-bottom:1px solid #e0e0e0;
border-right: 1px solid #e0e0e0;
background: #fafafa;
width: 130px;
}
table tr:last-child td {
border-bottom: 0;
}
table tr:hover td {
background: #f2f2f2;
}
#wrapper {
width: 740px;
height: 200px;
overflow-x: scroll;
overflow-y: scroll;
border: 1px solid rgb(205,205,205);
}
table thead {
position:fixed;
}
table td > div {
overflow: hidden;
white-space: nowrap;
}
</style>
</head>
<body>
<div id="wrapper">
<table>
<!-- Table Header -->
<thead>
<tr>
<th>Task Details</th>
<th>Firstname</th>
<th>Progress</th>
<th>Vital Task</th>
</tr>
</thead>
<!-- Table Header -->
<!-- Table Body -->
<tbody>
<tr>
<td>Create</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Table Row -->
<tr>
<td>Take the dog</td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr><!-- Darker Table Row -->
<tr>
<td>Waste half</td>
<td> </td>
<td>20%</td>
<td>No</td>
</tr>
<tr>
<td><div>Feel inferior</div></td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td><div>Some long text that shouldn't resize the box</div></td>
<td> </td>
<td>100%</td>
<td>Yes</td>
</tr>
<tr>
<td><div>Vow to complete</div></td>
<td> </td>
<td>23%</td>
<td>yes</td>
</tr>
<tr>
<td>Procrastinate</td>
<td> </td>
<td>80%</td>
<td>No</td>
</tr>
<tr>
<td>Hyperlink Example</td>
<td> </td>
<td>80%</td>
<td>Another</td>
</tr>
</tbody>
<!-- Table Body -->
</table>
</div>
</body>
</html>
You just needed to get rid of the white-space here
table td > div {
overflow: hidden;
white-space: nowrap;
}
and I added colgroups. They are better for setting widths in your columns and avoid issues
DEMO