Is it possible to make to panel-body div adjust to screen resolution when its 'display' is set to 'inline-block'? The panel-body div displayed full width when its 'display' set to 'block', which can cause other problems.
HTML code:
<div class="panel-body">
<table class="table table-hover table-bordered">
</table>
</div>
CSS code:
.panel-body {
padding: 15px 20px 15px 20px;
border-bottom: 1px solid #e5e5e5;
display: inline-block;
}
.table
{
width: 100%;
margin-bottom: 20px;
}
Notice that if set 'min-width:1100px;' to the table CSS, the table width is fixed, not able to adjust to the screen resolution.
Try this out
.panel-body {
padding: 15px 20px 15px 20px;
border-bottom: 1px solid #e5e5e5;
display: inline-block;
width: 100%;
box-sizing: border-box;
}
.table{
width: 100%;
height: 20px;/*Remove this*/
margin-bottom: 20px;
background: #ff0;/*Remove this*/
}
CodePen sample of code
Try this for outer div is responsive and the inner table with some width...
.panel-body {
width: 96%;
padding: 2%;
border: 1px solid #e5e5e5;
overflow-x: auto;
}
.table
{
width: 100%;
min-width: 1100px;
}
<div class="panel-body">
<table class="table table-hover table-bordered">
<tr>
<td>Sample data</td>
</tr>
</table>
</div>
Related
I am trying to create a CSS table with border all over using the standard method of applying top and left borders to all td elements (apart from those in first column and first row). And then there is a border on the <table>. This method suits my use-case better than one in which we use border-collapse.
But then there is a bug which resembles inner margin on td elements. This margin like space isn't always there but only occurs on some viewports for some reason. Here's my code:
*{
padding: 0;
margin: 0;
}
html, body {
height: 100%;
width: 100%;
}
.table-container {
display: flex;
flex-direction: column;
align-items: center;
padding-bottom: 50px;
font-size: 20px;
}
table {
font-size: 15px;
border-spacing: 0;
border: 4px solid black;
border-radius: 35px 35px 0 0;
border-left: none;
border-top: none;
width: 90vw;
background-color: white;
margin-top: 50px;
text-align: center;
}
td {
box-sizing: content-box;
border-left: 4px solid black;
border-top: 4px solid black;
height: 60px;
}
thead td:first-child {
border-top-left-radius: 35px;
}
thead td:last-child {
border-top-right-radius: 33px;
}
thead td {
font-size: 20px;
font-weight: 500;
}
table button {
cursor: pointer;
height: 100%;
border: 0;
background-color: white;
color: #d90429;
}
.progress-bar{
background-color: orange;
}
.progress-bar > div{
background-color: green;
height: 100%;
width: 50%
}
<div class="table-container">
<table>
<thead>
<tr>
<td>Task Type</td>
<td>Target Time (in Minutes)</td>
<td>Percentage Achieved</td>
<td>Add/Delete Tasks</td>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>120</td>
<td class="progress-bar">
<div>50</div>
</td>
<td>
<button type="button">
Delete
</button>
</td>
</tr>
</tbody>
</table>
</div>
Here's one viewport in which this bug can be seen in action:
I guess running above code snippet and looking at the output in full screen will reproduce this bug
EDIT
As pointed out by KIKOSoftware in comments, the problem seems to be specific to chrome.
My Version of Chrome happens to use 3.991px for border instead of 4px.
on a personal level, having had a thousand problems with borders in HTML tables,
I ended up opting for a radical solution: no border at all!
I use border-collapse: separate; and I play on border-spacing
in addition it lightens the css to write
I recommend it
in your case:
* {
padding : 0;
margin : 0;
}
html, body {
height : 100%;
width : 100%;
background-color: #658d8d; /* this one is mine... */
}
.table-container {
display : flex;
flex-direction : column;
align-items : center;
padding-bottom : 50px;
font-size : 20px;
margin: 1em;
}
table {
font-size : 15px;
border-collapse : separate;
border-spacing : 4px;
background-color : black;
border-radius : 33px 33px 0 0;
width : 90vw;
}
thead td {
font-size : 20px;
font-weight : 500;
}
td {
background-color : white;
height : 60px;
text-align : center;
}
thead td:first-child { border-top-left-radius: 29px; }
thead td:last-child { border-top-right-radius: 29px; }
table button {
cursor : pointer;
height : 100%;
width : 100%;
border : 0;
background-color : white;
color : #d90429;
}
.progress-bar {
background-color: orange;
}
.progress-bar > div {
background-color : green;
height : 100%;
width : 50%
}
<div class="table-container">
<table>
<thead>
<tr>
<td>Task Type</td>
<td>Target Time (in Minutes)</td>
<td>Percentage Achieved</td>
<td>Add/Delete Tasks</td>
</tr>
</thead>
<tbody>
<tr>
<td>Maths</td>
<td>120</td>
<td class="progress-bar"><div>50</div></td>
<td><button type="button">Delete</button>
</td>
</tr>
</tbody>
</table>
</div>
I have an HTML page in which there is a table which populates data from a database table and I am trying to restrict the size of the table by placing it in a div like in the following
<div id="scrollablebody">
<table class="clientTable">
<thead>
<tr>
<th>Grade</th>
<th>Term</th>
<th colspan="3">Actions</th>
</tr>
</thead>
<!--ko foreach: products-->
<tr>
<td class="clientproductHeader" data-bind="text: $data">
</td>
<td class="clientproductHeader" colspan="13"></td>
</tr>
<tbody data-bind="foreach: ko.observableArray($root.datainput()).extendsdistinct('Product').index.Product()[$data]">
<tr data-bind="template: { name: $root.displayMode, data: $data }"></tr>
</tbody>
<!--/ko-->
</table>
</div>
CSS for div
#scrollablebody{height:500px;overflow-y:auto;width:100%;}
But for some reasons the text in tbody is occupying all the space like in the following image
As you can see in the above picture the row with c5+ is unusually occupying lot of space
CSS for the Table
.clientTable {
max-width: 100%;
background-color: grey;
height:75%;
border-collapse: collapse;
border-spacing: 0;
margin-bottom: 20px;
width: 98%;
margin-left:0;
margin-right:100px;
float: left;
overflow:scroll;
}
table.clientTable thead tr .header {
background-image: url(images/bg.png);
background-repeat: no-repeat;
background-position: center right;
cursor: pointer;
}
table.clientTable td {
padding: 1px;
line-height: 10px;
text-align: center;
/*background-color:#3C78B5;*/
vertical-align: auto;
border: 1px solid #0088cc;
width: 120px;
}
.clientTable th {
padding: initial;
line-height: normal;
text-align: center;
width: initial;
height: 20px;
border: 1px outset gray;
background-color: black;
color: white;
cursor: pointer;
}
Change height to max-height. It's going grow to size if you don't specify and have the overflow as auto.
I've got a container element that's a certain width, with overflow-x: auto. In it I have a block level header element (h1) that's supposed to, being a block element, fill the container horizontally. And it does so, as long as there are no other elements in the container that overflow, creating a horizontal scrollbar. If there are overflowing elements, then the header element fills only the non-overflowing horizontal space of the container, but doesn't appear in the overflowing space.
Fiddle demonstrating the problem: http://jsfiddle.net/rand0mbits/qUh3s/
HTML:
<div id="one">
<h1>header</h1>
<table><tr><td>text</td><td>text</td><td>text</td><td>text</td><td>text</td>
<td>text</td></tr></table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
}
table td {
border: solid 1px;
padding: 20px;
}
How do i make the <h1> fill the whole width of the container?
See the fiddle.
Use the HTML caption element:
<div id="one">
<table>
<caption>
<h1>header</h1>
</caption>
<tr>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
<td>text</td>
</tr>
</table>
</div>
CSS:
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
margin-top: 0;
text-align: left;
}
table td {
border: solid 1px;
padding: 20px;
}
The H1 is going to inherit the width of its parent element since it's relative, so it will always end up being the same width you set #one to.
What you can do is instead of #one having overflow: auto, wrap the table inside another DIV with overflow: auto. This way, #one stays a fixed width, but the wrapper around the table, allows the content to scroll horizontally.
jsfiddle: http://jsfiddle.net/yetti/Ggua5/
Try this:
css
#one {
width: 200px;
overflow: auto;
border: solid 1px;
}
#one h1 {
font-size 1.1em;
background-color: blue;
display: inline-block;
width: 100%;
margin-top: 0;
position:relative;
}
table td {
border: solid 1px;
padding: 20px;
}
h1:after {
content:"";
background: blue;
position: absolute;
top: 0;
bottom: 0;
width: 100%;
left:100%
}
fiddle
Change this CSS code like the following then check and let me know if you want this:
#one {
width: 100%;
overflow: auto;
border: solid 1px;
}
This question already has answers here:
How do I remove the double border on this table?
(4 answers)
Closed 8 years ago.
(EDIT: Solved. I was on the right track with the border-collapse, but I had to use ctrl+f5 to see it)
Tried using border-collapse and border-spacing to remove them, but it didn't work.
Code:
<main>
<div class="adminr1">
<section class="adminc1">
<table class="adminResults">
<thead>
<td>cell</td>
<td>cell</td>
</thead>
<tr>
<td>cell</td>
<td>cell</td>
</tr>
</table>
</section>
</div>
</main>
CSS:
*
{
margin: 0;
padding: 0;
font-size: small;
font-family: Roboto;
vertical-align: middle;
text-decoration: none;
}
main
{
font-size: 0;
line-height: 1.5;
text-align: center;
margin: 0 auto;
width: 86%;
min-width: 1000px;
}
section
{
border: 1px solid #BBB;
background: #FFF;
border-radius: 7px;
display: inline-block;
overflow: hidden;
}
.adminr1
{
display: inline-block;
width: 66%;
height: 700px;
margin-right: 5px;
font-size: 0;
margin-bottom: 10px;
}
.adminc1
{
width: 100%;
height: 100%;
font-size: 0;
}
/*Table Styles:*/
.adminResults
{
width: 100%;
border: 1px solid #000;
}
.adminResults thead
{
border: 1px solid #000;
}
.adminResults tr td
{
border-left: 1px solid #000;
border-right: 1px solid #000;
}
So far, this is the only page I have which uses a table, so I have no table-related styles anywhere else that could be blocking or overwriting the properties I'm trying to add, nor do i have any border-related files on other elements applied generally enough to do the same thing.
I'm obviously missing something, because this seems like it should be a very easy thing to do.
Use border-collapse property to remove spacing between cells
table.adminResults{
border-collapse:collapse;
}
Fiddle Demo
add the border-collapse:collapse; to table.
.adminResults{width:100%;border:1px solid #000;border-collapse: collapse;}
Here is an example:
http://jsfiddle.net/kheema/n4rsy/1/
Did your try to add border="0" cellpadding="0" cellspacing="0" inside table? Like this:
<table class="adminResults" border="0" cellpadding="0" cellspacing="0">
Set border-spacing: 0px; and border-collapsing: seperate; on the Table.
.adminResults {
width: 100%;
border: 1px solid #000;
border-spacing: 0px;;
border-collapse: seperate;
}
Check out this updated: Fiddle Demo
I have a resizable and movable div using JQuery UI. I want a table inside it that scrolls vertically. Trying to set the table height to 100% basically does nothing, and absolute positioning with top and bottom of 0 doesn't work either. I have tried to put a separate div as a container and that has gotten me closer than anything, but it still does not behave properly.
Here is the fiddle: http://jsfiddle.net/scottbeeson/KrP7v/1/
Here is the relevant CSS:
table {
border-collapse: collapse;
width: 100%; height: 100%;
}
#tableContainer {
height: 100%; width: 100%;
overflow-x: hidden;
overflow-y: scroll;
}
And the basic HTML layout:
<div id="window">
<div id="header">Draggable Header</div>
<div id="tableContainer">
<table>
<thead>
<tr>
<td>Column 1</td>
<td>Column 2</td>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
</div>
</div>
I think that this is what you want.
http://jsfiddle.net/KrP7v/12/
#window {
width: 500px;
height: 400px;
min-width: 100px;
min-height: 100px;
border-bottom: 1px solid gray;
}
#header {
height: 25px;
line-height: 25px;
background-color: gray;
color: white;
text-align: center;
}
table {
min-height: 300px;
height: 100%;
width: 100%;
border-collapse: collapse;
}
#tableContainer {
position: absolute;
top: 25px;
bottom: 0px;
left: 0px;
right: 0px;
margin: 0;
padding: 0;
overflow: auto;
}
td {
padding: 5px;
margin: 0px;
border: 1px solid gray;
}
tr:last-child td {
border-bottom: none;
}
Here's what you can do:
http://jsfiddle.net/KrP7v/4/
#window {
width: 400px;
border: 1px solid green;
overflow-x: scroll;
overflow-y: scroll;
}