I have a bordered table, using the Bootstrap classes table table-bordered. If I add border-collapse: separate, the borders are separated correctly, but the top and bottom ones become zero width and so invisible.
Is this a quirk of Bootstrap, or am I doing something wrong? If so, what's the right approach?
.table-bordered {
border-collapse: separate;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="/test.css">
</head>
<body>
<container>
<div class="row">
<div class="col-6">
<table class="table table-bordered m-5">
<tbody>
<tr>
<td>Box</td>
<td rowspan=2>Big box</td>
<td>Box</td>
</tr>
<tr>
<td>Box</td>
<td>Box</td>
</tr>
</tbody>
</table>
</div>
</div>
</container>
</body>
</html>
In bootstrap css border-width: 1px 0 so that you need to overnight it
.table-bordered {
border-collapse: separate;
}
.table-bordered td {
border-width: 1px !important;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap test</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<link rel="stylesheet" href="/test.css">
</head>
<body>
<container>
<div class="row">
<div class="col-6">
<table class="table table-bordered m-5">
<tbody>
<tr>
<td>Box</td>
<td rowspan=2>Big box</td>
<td>Box</td>
</tr>
<tr>
<td>Box</td>
<td>Box</td>
</tr>
</tbody>
</table>
</div>
</div>
</container>
</body>
</html>
Related
With Bootstrap 4, I want my cols to be align in multiple row.
If I set rows and cols it works just fine but if one of my col need to fit 2 slot with flex-grow:2 it create a little gap between rows. I tried every flex's stuff with no success.
Here you can have the link to try it. I created 2 cases, one with divs and the other (the one I care) with a table with the row class.
Link on w3schools
.col{
border:1px solid red;
}
<!DOCTYPE html>
<html lang="en">
<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/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="col" style="flex-grow:2.08">1</div>
<div class="col">2</div>
</div>
<div class="row">
<div class="col">1</div>
<div class="col">2</div>
<div class="col">3</div>
</div>
</div>
<br/>
<div class="container">
<table class="table">
<thead>
<tr class="row">
<th class="col">Firstname</th>
<th class="col">Lastname</th>
<th class="col">Email</th>
</tr>
</thead>
<tbody>
<tr class="row">
<td class="col" style="flex-grow:2">John (2.07 in flex-grow works in 1080p...)</td>
<td class="d-none">Doe</td>
<td class="col">john#example.com</td>
</tr>
<tr class="row">
<td class="col">Mary</td>
<td class="col">Moe</td>
<td class="col">mary#example.com</td>
</tr>
<tr class="row">
<td class="col">July</td>
<td class="col">Dooley</td>
<td class="col">july#example.com</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In the first example you can see a little gap between the "1" / "2" and "2" / "3" and its the same in the second example.
I really need to use flex-grow because in my full code some of my TDs have a fixed width in PX and others TDs need to fit empty space but with the same width (or twice if I set the flex-grow:2)
It seems that W3 schools has noticed an issue too, hence their "2.07 in flex-grow...".
I'm not sure why it's occurring, but a work-around can be to add a class to those td's and then add media queries for that class at different screen sizes.
For example:
#media screen and (min-width: 992px) {
.alter-flex{
flex-grow: 2.09;
}
}
I have a tablular structure (a table with no th) that looks like:
---1--- ---2---
---3--- ---4---
I want it be like this is mobile screens:
---1---
---2---
---3---
---4---
Whatever I do i can't design that. My suggested code:
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
always results
1
2
3
4
and without display-block always results
---1--- ---2---
---3--- ---4---
If you use bootstrap you have to set col-xs-12 instead col-xs12 (add -)
See JSFiddle:https://jsfiddle.net/v09bzj89/
<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>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs-12 col-sm-6 ">1</td>
<td class="col-xs-12 col-sm-6 ">2</td>
</tr>
<tr class="row">
<td class="col-xs-12 col-sm-6">3</td>
<td class="col-xs-12 col-sm-6">4</td>
</tr>
</tbody>
</table>
Use media query and add the display: block style in that block only, so that it applies only in a particular resolution.
// This style will be applied only below screen widths 600px
#media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
<!DOCTYPE html>
<html lang="en">
<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.3.7/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.3.7/js/bootstrap.min.js"></script>
<style>
#media screen and (max-width: 600px) {
.display-block {
display: block !important;
}
}
</style>
</head>
<body>
<table>
<tbody style="width: 100%">
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">1</td>
<td class="col-xs12 col-sm-6 display-block">2</td>
</tr>
<tr class="row">
<td class="col-xs12 col-sm-6 display-block">3</td>
<td class="col-xs12 col-sm-6 display-block">4</td>
</tr>
</tbody>
</table>
</body>
</html>
Here is my html, I am using the SCSS version:
<!doctype html>
<html class="no-js" lang="en" dir="rtl">
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title here</title>
<link rel="stylesheet" href="css/app.css">
</head>
<body>
<div class="row">
<div class="small-3 small-centered columns">3 centered</div>
</div>
<div class="row">
<div class="small-6 large-centered columns">6 centered</div>
</div>
<div class="row">
<div class="small-9 small-centered large-uncentered columns">9 centered</div>
</div>
<div class="row">
<div class="small-11 small-centered columns">11 centered</div>
</div>
<script src="bower_components/jquery/dist/jquery.js"></script>
<script src="bower_components/what-input/dist/what-input.js"></script>
<script src="bower_components/foundation-sites/dist/js/foundation.js"></script>
<script src="js/app.js"></script>
</body>
</html>
Here is what I get:
UPDATE (clarification):
When I inspect the elements, they don't have a row/column class definition, and they are not centered at all.
What am I doing wrong?
Note: I am using the rtl settings. I checked if it broke things, but it still didn't work.
Do you have an #include foundation-float-classes or #include foundation-flex-grid on your app.scss? Maybe you are using only #include foundation-xy-grid-classes, where there are no .row and .columns anymore, only .grid-x and .cell
<!DOCTYPE html>
<html lang="en">
<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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="jumbotron text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="col-sm-3">
<div class="panel panel-default">
<div class="panel-body" style="height:350px; background-color:#fff; border-color:#66cfff; border-style:solid; border-width:1px;padding:0px; overflow:auto;">
<div style="background-color: #0096db!important; padding: 10px 10px 30px 10px; align-items:stretch;">
<div style="float:left; vertical-align:middle">
<h2 style="color: #ffffff !important; text-align: left; font-size: 16px;font-family:Helvetica; font-weight: bold;">Last Payment</h2>
</div>
<div style="float:right ; vertical-align:middle">
<h5>
<a style="cursor:pointer; font-size:13px; color:#ffffff !important; font-weight:bold;" [routerLink]="['/historicPayments']">
View All
</a>
</h5>
</div>
</div>
<table class='table' style="margin-top:10px;">
<thead class="box-heading">
<tr class="row-style">
<th width="16%" style="vertical-align:top">Property/ Agreement ID</th>
<th width="20%" style="vertical-align:top">Property/ Agreement Name</th>
<th width="12%" style="vertical-align:top">Project ID</th>
<th width="20%" style="vertical-align:top">Project Name</th>
<th width="12%" style="vertical-align:top">Check Date</th>
<th width="12%" style="vertical-align:top">Check Amount</th>
<th width="8%" style="vertical-align:top">Invoice</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
</html>
How to stretch the div tag to be equal to table's width. Please see the screenshot. Currently there is white space showing at the end
Please check the updated code. I see it showing the white space at the end of header lable when we move the horizontal bar. Please test this code on w3c school site.
Give percentage value for width attribute.
.example { width:50%; background:green;}<div class="example">HAVE FUN!</div>
Try using width:100%; display:block;
This will help you to make your div 100%
Apply your div with display:table; css.
For example your div class is .box1 then css will be:
div.box1 {width:100%; display:table;}
I assume table width is 100% too.
I have a Bootstrap responsive table which is within a div with the CSS display:table. This seems to be preventing the table from becoming responsive. How can I make the table responsive without changing the outer CSS?
JsFiddle
For reference, display:table is used to create a "sticky footer": How to create a sticky footer that plays well with Bootstrap 3
If you don't want to change the current css you have to make your text responsive to fix this problem.
set the font size and instead of px use vm, vw, vh or vmin These suffixes make your text responseive.
try this, may be this will help you
<!DOCTYPE html>
<html lang="en">
<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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style>
.content-container {
height: 100%;
width: 100%;
display: table;
}
.table-responsive {
border: 1px solid #ddd;
display: -moz-stack;
margin-bottom: 15px;
overflow-y: hidden;
width: 100%;
}
</style>
</head>
<body>
<div class="content-container">
<div class="container">
<div class="row">
<div class="col-xs-12">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Bookings</h3></div>
<div class="bookings_list">
<div class="row">
<div class="col-xs-12">
<div class="table-responsive">
<table class="table table-striped table-hover">
<thead>
<tr>
<th>ID</th>
<th>Customer</th>
<th>Provider</th>
<th>Agent</th>
<th>Service</th>
<th>Status</th>
<th>Status</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr class="clickable" action="push" href="/bookings/UY6001">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
<tr class="clickable" action="push" href="/bookings/UY6000">
<td>123</td>
<td>John Smith</td>
<td>ACME Corp</td>
<td>Mike</td>
<td>123456</td>
<td>Active</td>
<td>Active</td>
<td>Active</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Set your container's width based on the viewport instead of a percentage value:
#media (max-width: 768px) {
.container {
width: 100vw;
}
}
Updated Fiddle
Since container is a pretty common class in bootstrap, you might consider adding a custom class to the specific element you want to add this style to.