I'm trying to vertically align the column header the carets, but as you can see they are currently misaligned.
What I have so far (this is using bootstrap)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Table Test</title>
<link rel="stylesheet" href="css/all.css" />
<link rel="stylesheet" href="css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
</head>
<body>
<div class="container">
<div>
<table class="table table-dark table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">
Title
<div style="float: right; display: inline;">
<div style="height: 16px">
<i class="fas fa-caret-up" style="height: fit-content; vertical-align: bottom; font-size: 20px;"></i>
</div>
<div style="height: 16px;">
<i class="fas fa-caret-down" style="height: fit-content; vertical-align: top; font-size: 20px;"></i>
</div>
</div>
</th>
<th scope="col">Foo</th>
<th scope="col">Bar</th>
<th scope="col">Quax</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
It produces this on my chrome:
The "Title" is too high and the carets are too low. How would I align them vertically in the middle of the header.
th {
vertical-align: top;
position: relative;
}
th .fas {
position: absolute;
right: 8px;
line-height: 24px;
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta2/css/all.min.css" integrity="sha512-YWzhKL2whUzgiheMoBFwW8CKV4qpHQAEuvilg9FAn5VJUDwKZZxkJNuGM4XkWuk94WCrrwslk8yWNGmY1EduTA==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div class="container">
<div>
<table class="table table-dark table-striped table-hover table-bordered">
<thead class="thead-dark">
<tr>
<th scope="col">
Title
<i class="fas fa-sort"></i>
</th>
<th scope="col">Foo</th>
<th scope="col">Bar</th>
<th scope="col">Quax</th>
</tr>
</thead>
<tbody>
<tr>
</tr>
</tbody>
</table>
</div>
</div>
You can try :
th {
vertical-align: bottom;
text-align:center;
}
it should align your theads to the bottom center
Related
This question already has answers here:
Centering text in a table in Twitter Bootstrap
(10 answers)
Closed 10 months ago.
In this table how can I align the text in center? text-center is not working.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
You have to apply the Bootstrap-class: text-center to every single td not the the table! Alternativly you could consider creating a custom css with td { text-align: center; } which will be shorter and easier then applying the bvootstrap-class to every single td.
<!-- Bootstrap-5 -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- Body -->
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody>
<tr>
<td class="text-center">name</td>
<td class="text-center">supplier </td>
<td class="text-center"><button>Delete</button> </td>
</tr>
</tbody>
</table>
You can use the classname text-center.
<div class="text-center">
I am centered
</div>
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container text-center">
<table class="table table-striped">
<tbody>
<tr>
<td>John</td>
<td>Doe</td>
<td>john#example.com</td>
</tr>
<tr>
<td>Mary</td>
<td>Moe</td>
<td>mary#example.com</td>
</tr>
<tr>
<td>July</td>
<td>Dooley</td>
<td>july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
Or in CSS put this in the parent container
display: flex;
align-items: center;
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped table-bordered table-dark table-hover ">
<tbody align="center">
<tr>
<td>name</td>
<td>supplier </td>
<td><button>Delete</button> </td>
</tr>
</tbody>
</table>
add align="center" to the tbody
use css classes, go checkout centertag - w3schools
.class{text-align:center;}
<tbody>
<tr>
<td class="center">name</td>
<td class="center">supplier </td>
<td><button class="center">Delete</button> </td>
</tr>
</tbody>`
I have added a font awesome icon in a table by using the following code.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="d-flex justify-content-center">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Can anyone please tell me how to bring this icon to the bottom line and center of that column, i.e. one half of this icon is inside and the other half is outside the table.
You could achieve this by setting the containing div to position: relative and define for the icon position: absolute and top: 0.375rem, the half of the padding of the containing div (0.75rem).
.form-group div {
position: relative
}
a.fa-plus-circle {
position: absolute;
top: 0.375rem;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="d-flex justify-content-center">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
I have created a table which include a "+" font awesome icon.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody>
<tr>
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
<div class="justify-content-center" style="position: absolute; width: 100%; left: 50%;">
<a class="fa fa-plus-circle" href="#"></a>
</div>
</td>
</tr>
</tbody>
</table>
Now how to add a new row by clicking on the "+" icon?
You can't add another row without using javascript or Jquery. here is a solution:-
function addrow(){
var row = "<tr><td class='form-group' style='position: relative'><input type='Column_1' class='form-control' id='clmn1' placeholder='Enter the name'><div class='justify-content-center' style='position: absolute; width: 100%; left: 50%;'></div></td></tr>";
document.getElementById("myList").insertAdjacentHTML('beforeend', row);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" />
</head>
<body>
<table class="table table-bordered w-auto">
<thead>
<tr>
<th>Column_1</th>
<th>Column_2</th>
</tr>
</thead>
<tbody id="myList">
<tr >
<td class="form-group" style="position: relative">
<input type="Column_1" class="form-control" id="clmn1" placeholder="Enter the name">
</td>
</tr>
</tbody>
<tfoot> <tr><td><a onclick="addrow()" class="fa fa-plus-circle" href="#"></a></tfoot></td></tr>
</table>
</body>
</html>
My code works almost as I want it however after some research and trying I finally made my table scrollable however I can't seem to make the header stay fixed no matter what I try, could someone be able to help?
I need the header to be fixed so you can still see the headings when you scroll down the table of course.
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>
Add to th
position:sticky;
top:0;
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
.my-custom-scrollbar table th {
background:#b8daff;
position:sticky;
top:0;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>
You can use the following css with a little bit of js :
CSS
.sticky {
position: fixed;
top: 0;
width: 100%;
}
JS
window.onscroll = function() {stickyHeaderFunction()};
var header = document.getElementById("your_header");
var sticky = header.offsetTop;
function stickyHeaderFunction() {
if (window.pageYOffset >= sticky) {
header.classList.add("sticky")
} else {
header.classList.remove("sticky");
}
}
You just have to use the th(header) to stick.
th {
background: white;
position: sticky;
top: 0;
box-shadow: 0 2px 2px -1px rgba(0, 0, 0, 0.4);
}
Demo:
.my-custom-scrollbar {
position: relative;
height: 500px;
overflow: auto;
}
.table-wrapper-scroll-y {
display: block;
}
th {
background: #B8DAFF;
position: sticky;
top: 0;
}
.table {
border-collapse: separate;
}
<!DOCTYPE html>
<html lang="en">
<head>
<script src="myScript.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<meta charset="utf-8">
<title>Users</title>
<meta name="description" content="APP Web Task 5">
<meta name="author" content="SitePoint">
</head>
<!--Text body-->
<body>
<!--header-->
<header class="container jumbotron text-center">
<h2>APP Single Page App</h2>
</header>
<!--Section 1, table-->
<div class="container">
<section id="sectUsers">
<div class="table-wrapper-scroll-y my-custom-scrollbar">
<table id="tblUsers" class="table table-striped table-bordered table-fixed">
<!--Table header-->
<thead class="table table-bordered table-primary table-striped text-center">
<tr id="tblUserHeader">
<th scope="col">User ID</th>
<th scope="col">Email</th>
<th scope="col">First Name</th>
<th scope="col">Last Name</th>
<th scope="col">Avatar</th>
</tr>
</thead>
<!--Table body-->
<tbody class="table table-bordered">
<tr id="user1">
<td scope="row"><b>1</b></td>
<td>george.bluth#reqres.in</td>
<td>George</td>
<td class="w3-center">Bluth</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/calebogden/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user2">
<td scope="row"><b>2</b></td>
<td>janet.weaver#reqres.in</td>
<td>Janet</td>
<td class="w3-center">Weaver</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/josephstein/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user3">
<td scope="row"><b>3</b></td>
<td>emma.wong#reqres.in</td>
<td>Emma</td>
<td class="w3-center">Wong</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/olegpogodaev/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user4">
<td scope="row"><b>4</b></td>
<td>eve.holt#reqres.in</td>
<td>Eve</td>
<td class="w3-center">Holt</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/marcoramires/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user5">
<td scope="row"><b>5</b></td>
<td>charles.morris#reqres.in</td>
<td>Charles</td>
<td>Morris</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/stephenmoon/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
<tr id="user6">
<td scope="row"><b>6</b></td>
<td>tracey.ramos#reqres.in</td>
<td>Tracey</td>
<td>Ramos</td>
<td>
<div><img src="https://s3.amazonaws.com/uifaces/faces/twitter/bigmancho/128.jpg" alt="avatar" class="rounded-circle"></div>
</td>
</tr>
</tbody>
<!-- <div id="divPageNumber">Page<span id="pageNumber">1</span> of <span id="totalPages">2</span></div>
<button id="btnPrevious" >Previous</button><button id="btnNext" >Next</button> -->
</div>
</section>
I've been working on a project for a few days now, and I keep coming across this problem. I have a table with data in it, and I want the padding to be 30px on each side, and the '.task-link' or 'header-6' to expand with the window. Instead the width of the div goes across the entire screen, and it doesn't look even, and it is killing me. Sorry, new to HTML, so cut me some slack please, I'm sure it's obvious, I've tried lots of different things to no success, and I don't see why it should be covering the whole screen. Anyway, here is my code:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div id="tablediv">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
</main>
</body>
Here is an example of what is happening now, and what I want it to look like.
now: https://gyazo.com/00870da7fa1d8642dde8814ab4bd3bac
what I want: https://gyazo.com/8c5a48ceb6a4e2470dbf10c686992fbc
The table goes all the way, side to side,with a padding of 30px on each side, as well as the Header 6 expands to match the extend of the screen, and when it gets smaller, I want only the Header 6 to get smaller.
You can use bootstrap responsive table. Here the .table-responsive class creates a responsive table which will scroll horizontally on small devices (under 768px) and when viewing on anything larger than 768px wide, then it will display the table by using the full width of the screen.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="table-responsive">
<table class="table">
<thead>
<tr>
<th>1</th>
<th>Header 2</th>
<th>Header 3</th>
<th>Header 4</th>
<th>Header 5</th>
<th>Header 6</th>
<th>Header 7</th>
<th>Header 8</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
<td>longtextlongtextlongtext</td>
<td>6</td>
<td>7</td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
remove col-sm-8 and checkout bootstrap grid
https://getbootstrap.com/docs/4.0/layout/grid/
A bootstrap grid always has to go within a row, Also a grid persists of 12 columns.
for example:
<div class="row">
<div class="col-md-4></div>
<div class="col-md-4></div>
<div class="col-md-4></div>
</div>
This will give 3 identical columns with the same width
Snippet:
main {
background-color: #c9c9c9;
}
body, html {
margin: 0px;
padding: 0px;
}
#tablediv {
padding-left: 30px;
padding-right: 30px;
padding-bottom: 0px;
}
table {
border-collapse: collapse;
white-space: nowrap;
/* width:100%; */
table-layout: fixed;
}
table tr th{
white-space: nowrap;
border: 1px solid white;
text-align: center;
text-transform: uppercase;
color: #fff;
font-size: 17px;
}
table tr td {
text-align: center;
text-transform: uppercase;
color: white;
}
table tr td.shrink,
table tr th.shrink {
white-space: nowrap;
}
table tr td.expand,
table tr th.expand {
word-wrap: break-word;
width: 20%;
}
.task-link {
overflow: hidden;
padding: 0 0%;
width: 0;
}
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<link rel="stylesheet" href="main.css">
<script src="main.js"></script>
</head>
<body>
<!-- <div id="sidebar" class="flex col-sm-4">
<a href="tasks.html">
<i class="fas fa-tasks"></i><br>Tasks
</a>
<a href="profiles.html">
<i class="fas fa-user-circle"></i><br>Profiles
</a>
<a href="#">
<i class="fas fa-mask"></i><br>Proxies
</a>
<a href="#">
<i class="fas fa-cogs"></i><br>Settings
</a>
<a href="#">
<i class="fas fa-check-circle"></i><br>Captcha
</a>
</div> -->
<main class="page-content">
<div class="row" id="tablediv">
<div class="col-sm-2"></div>
<div class="col-sm-8">
<table id="table" class="col-sm-8">
<tr id="headers">
<th class="task-num shrink">1</th>
<th class="task-status shrink">Header 2</th>
<th class="task-platform shrink">Header 3</th>
<th class="task-type shrink">Header 4</th>
<th class="task-keyword shrink">Header 5</th>
<th class="task-link expand">Header 6</th>
<th class="task-profile shrink">Header 7</th>
<th class="task-proxy shrink">Header 8</th>
</tr>
<tr id="${temp}" class="profiletr" tabindex="0">
<td class="task-num shrink">1</td>
<td class="task-status shrink">2</td>
<td class="task-platform shrink">3</td>
<td class="task-type shrink">4</td>
<td class="task-keyword shrink">5</td>
<td class="task-link expand">longtextlongtextlongtext</td>
<td class="task-profile shrink">6</td>
<td class="task-proxy shrink">7</td>
</tr>
</table>
</div>
<div class="col-sm-2"></div>
</div>
</main>
</body>
As you can see, This makes a whitespace spot on both sides of your screen.
Also https://getbootstrap.com/docs/4.0/layout/grid/ gives a lot of information, check it out for sure.