I do not understand how Bootstrap table cells have a width greater than what I set via width, min-width, and max-width styles both in external styles and inline within the table cell. I am setting a width of 150px but the actual width is 218.25px.
table{table-layout:fixed;}
td, th{
width:150px !important;
height:75px !important;
max-width:150px !important;
max-height:75px !important;
min-width:150px !important;
min-height:75px !important;
}
Here's the JSFiddle:
https://jsfiddle.net/QK9sE0/b8on0vzj/14/
A screenshot below illustrates my problem:
Bootstrap sets the table at 100% width, so you need to override that. Here is what I did:
table {
table-layout:fixed;
width: inherit !important;
}
td, th {
width:150px !important;
height:75px !important;
max-width:150px !important;
max-height:75px !important;
min-width:150px !important;
min-height:75px !important;
}
<head>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
</head>
<body>
<table class="table table-bordered">
<thead>
<tr>
<th scope="col">#</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 style="width:150px; height:75px">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>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
</body>
Related
I need to remove the border vertical of the table except outside as shown below with bootstrap
I tried
<table class="table no-footer worker-data table-bordered"....
.table td, .table th {
border: none;
}
But result
Go with the below approach.
Clear the right border for first child of row.
Clear the left border for last child.
Clear right and left border for all other other child ec=xcept the first and last child of row.
Working Example
.table td:first-child, .table th:first-child {
border-right: none;
}
.table td:last-child, .table th:last-child {
border-left: none;
}
.table td:not(:first-child):not(:last-child),
.table th:not(:first-child):not(:last-child) {
border-right: none;
border-left: none;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<div class="container">
<table class="table no-footer worker-data table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<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>
I am not able to set the table as same as the header. please help and thanks in advance.
code and image are below.enter image description here
<!-- This is the table Style-->
<style>
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
</style>
//this is the HTML code
<div>
<table id="t01">
<tr class="header">
<th>Name</th>
<th>Download</th>
</tr>
<tr class="data_table"></tr>
</table>
</div>
Your html is wrong, use :
<table>
<thead>
<tr class='header'>
<th>Name</th>
<th>Download</th>
</tr>
<thead>
<tbody>
<tr class='data_table'>
</tr>
</tbody>
</table>
Try Following code.
table {
width:100%;
}
th, td {
width: 100%;
border: 3px solid black;
border-collapse: collapse;
}
th, td {
width: 100%;
padding: 13px;
text-align: left;
}
table#t01 th {
width: 100%;
background-color: orange;
color: black;
font-size: 20px;
position: relative;
}
<table id="t01">
<tr class="header">
<th colspan="2">Name</th>
<th>Download</th>
</tr>
<tr class="data-table">
<td>Mp3</td>
<td>Download</td>
</tr>
<tr class="data-table">
<td>File</td>
<td>Download</td>
</tr>
</table>
You can use the Bootstrap framework. You may get almost everything for web designing :
Visit
getbootstrap
Example of a Bootstrap table.
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-sm-12">
<table class="table">
<thead>
<tr>
<th scope="col">#</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>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>
</html>
Using Bootstrap-4 I am not able to apply scroll for table body with fixed header.
I am using min-height as well as overflow for applying scroll to table body.
Does bootstrap4 doesn't support scroll on table body?
Below snippet explains the problem more clearly.
Am I going wrong somewhere?
.tbody {
min-height:10px;
overflow-y:scroll;
}
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody class="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>
After setting display:block property to table you can set height and widths.
Try this:
table {
display:block;
height : <set your desired height>;
overflow-y : scroll;
}
I hope this is what you were looking for
.tbody {
height: 50px !important;
overflow-y: scroll;
}
.my-tbody {
height:30px;
display:block;
overflow-y:scroll;
width:100%;
}
tbody {
width: 100%;
}
tr {
width: 100%;
}
td {
width: 33.33%;
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<table class="my-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>
<div class="cl"></div>
</table>
</table>
</div>
or you can use this .
.tbody {
height: 50px !important;
overflow-y: scroll;
}
.my-tbody {
height:50px;
display:block;
overflow-y:scroll;
width:100%;
}
tbody {
width: 100%;
}
tr {
width: 100%;
}
td {
width: 33.33%;
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<div class="container">
<table class="table table-bordered">
<thead>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<table class="my-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>
<div class="cl"></div>
</table>
</table>
</div>
I want to have a little not standard table. This is how it should look:
This is my demo. As you can see there, width of the first column is increased by text, but I don't want this behaviour. I want text to go from left to right in full row.
UPDATE:
For those who want to close question. Read below please.
I can't use additional tr and td with colspan for note. I use angular2 and datatables.net for tables and it will break selection and getting selected data.
use colspan
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td colspan="3"><div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
since you don't want to use extra tr you may can use this method using css
.tr-holder>td {
padding-bottom: 35px !important;
}
.full-width {
position: absolute;
left: 0;
width: 100%;
padding: 0 9px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr class="tr-holder"> <!-- class added -->
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div class="full-width"> <!-- class added -->
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could also add an inline CSS
<td style="max-width:50px;">Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
specify the width of your table.
add this css properties to your style sheet.it will work fine
table
{
table-layout: fixed;
width: 100px;
}
I'm added the snippet below.
table
{
table-layout: fixed;
width: 100px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
or you can apply style to your td div,as
td div { width: 100px; overflow: hidden; }
td div { width: 100px; overflow: hidden; }
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<table class="table">
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<td>Mark
<div>Age: 18</div>
<div>Income: 85</div>
<div>
<span>Note:</span>
<span>A big text here, A big text here, A big text here, A big text here, A big text here</span>
</div>
</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<td>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>
You could use something like bootstrap or foundations to simulate a table structure
I need to place an PNG to the right of a table, e.g.:
_______ ___
|__|____| |\ /|
|__|____| | X |
|__|____| |/_\|
Table Image
The image cannot fill more than 50% of the screen width. The table expands to fill the remaining space.
I tried using CSS columns, but the table data became strange.
I tried putting the table inside another table, but this seems like poor code.
How can I place an image to the right of a table in CSS?
You can float them:
table { float: left; width: 50% }
img { float: right; width: 50% }
Fiddle
Use display: inline-block
//css
table{
display: inline-block;
}
img{
display: inline-block;
}
Demo Fiddle
You can try making use of flexbox :)
(If you do view the example here in SO, please do so in full page)
#main-div {
display: flex;
}
#img-1 {
max-width: 50%;
}
#media only screen and (min-width: 320px) and (max-width: 723px){
#main-div {
flex-direction: column;
}
}
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<div id="main-div">
<table class="table" id="item-1">
<thead>
<tr>
<th scope="col">#</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>Larry</td>
<td>the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
<img src="https://via.placeholder.com/1000x500" id="img-1">
</div>
Also, here's a working example :)
On the other hand, you can limit the size of the image to 50% by setting its max-width property to 50%.
Edit: I only realized this was an old question lol.