I have a page that has a lot of elements on it - Buttons, Tiles, Tables, Lists, etc. I am wanting to only print ONE of the HTML tables when I click my print button.... I am needing to do this via css and html, what is the bets way to accomplish this? I have the following, but this prints the entire page:
CSS
<style media="screen">
.noPrint {
display: block;
}
.yesPrint {
display: block !important;
}
</style>
<style media="print">
.noPrint {
display: none;
}
.yesPrint {
display: block !important;
}
</style>
HTML
<div class="table-responsive yesPrint">
<table class="table table-striped table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 15px;">Number</th>
<th style="text-align: left; font-size: 15px;">Caller</th>
<th style="text-align: left; font-size: 15px;">Description</th>
</tr>
</thead>
<tbody>
<tr>
<td style="text-align: left; font-size: 13px;">Number</td>
<td style="text-align: left; font-size: 13px;">Name</td>
<td style="text-align: left; font-size: 13px;">Here is the short description</td>
</tr>
</tbody>
</table>
<input type="button" onclick="window.print()"/>
</div>
Related
I want to generate an email including some table data and use PLQL to send this to company members. So far I am using some HTML templates and Oracles UTL_mail. I did send emails to a Gmail web interface and to Outlook. As the style seems okay in Gmail, I guess that it is an Outlook issue. I am a complete beginner when it comes to HTML and I am open to any suggestions and workarounds so that the table looks somewhat smooth for Outlook, too.
Below Code will not show any border for Outlook but it does for Gmail and within the W3School-Try-It editor.
utl_mail.send(sender => 'noreply#mycompany.de'
, recipients => 'me#gmail.com,me#mycompany.de'
, subject => 'Test Table'
, message =>
'<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Oracle Table</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 2em;
}
table.table {
width: 80%;
}
.table th {
text-align: left;
}
table, th, td {
border: 1px solid rgba(3,3,3,0.2);
border-collapse: collapse;
}
th.zelle {
text-align: left;
padding-right: 2rem;
}
td.zelle {
text-align: right;
padding-left: 1rem;
}
img {
width: 200px
}
#media screen and (max-width: 1200px) {
body {
font-size: 150%;
}
table {
width: 100%;
}
table.table {
width: 60%;
font-size: 100%;
}
tr {
display: flex;
flex-direction: row;
flex-wrap: wrap;
margin: 0.5em 0;
border: 1px solid rgba(3,3,3,0.2);
border-collapse: collapse;
}
td, th {
flex: 1 1 150px;
border-collapse: collapse;
}
th.zelle {
text-align: left;
padding-right: 1rem;
}
td.zelle {
text-align: right;
padding-left: 1rem;
}
}
</style>
</head> <body> <p> This is a table</p> <br>
<table class="table">
<tr>
<th class="zelle"> Name </th> <th class="zelle"> Sal </th> <th class="zelle"> Dep </th> </tr>
<tr> <td class="zelle"> Smith </td> <td class="zelle"> 3k </td> <td class="zelle"> 12 </td> </tr>
<tr> <td class="zelle"> Miller </td> <td class="zelle"> 3k </td> <td class="zelle"> 10 </td> </tr>
<tr> <td class="zelle"> Johnsen </td> <td class="zelle"> 5k </td> <td class="zelle"> 29 </td> </tr>
</table>
<section>
<p> Best regards, <br> Peter</p>
</section>
</body>
</html>
'
, mime_type => 'text/HTML; charset= utf-8'
);
Debug the code incrementally starting from a minimal representative example and, when that is working, incrementally include extra functionality.
Start without any CSS:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8" />
<title>Oracle Table</title>
</head>
<body>
<p> This is a table</p><br />
<table class="table">
<thead>
<tr>
<th class="zelle"> Name </th> <th class="zelle"> Sal </th> <th class="zelle"> Dep </th>
</tr>
</thead>
<tbody>
<tr>
<td class="zelle"> Smith </td> <td class="zelle"> 3k </td> <td class="zelle"> 12 </td>
</tr>
<tr>
<td class="zelle"> Miller </td> <td class="zelle"> 3k </td> <td class="zelle"> 10 </td>
</tr>
<tr>
<td class="zelle"> Johnsen </td> <td class="zelle"> 5k </td> <td class="zelle"> 29 </td>
</tr>
</tbody>
</table>
<section>
<p> Best regards, <br> Peter</p>
</section>
</body>
</html>
Note: I added / to the self-closing tags and added thead and tbody tags; these aren't required (for HTML), just my personal preference.
Test if that displays as expected.
Add in a single CSS statement:
<style>
body {
font-family: Arial, Helvetica, sans-serif;
padding: 2em;
}
</style>
and test.
Add another CSS statement and test and repeat until you find where it breaks.
Using Bootstrap 4. I have a responsive table in which I would like to make a scrollable tbody. Table look like this:
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<!-- some rows -->
</tbody>
</table>
To scroll in tbody, I added a scss class .custom-table to table, it looks like this
.custom-table {
tbody {
height: 50px;
overflow-y: auto;
width: 100%;
display: block;
}
}
However, this style does not work correctly. All content in tbody moves to the left. I have a working JSFiddle example.
What did I do wrong?
Please check bellow, I prefer to use flexbox. I also use -webkit and -ms prefixes for more cross browser compatibility
tbody , thead {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
tr {
-ms-flex-preferred-size: 100%;
flex-basis: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
th,td {
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
text-align: center;
}
tbody {
height: 50px;
overflow-y: auto;
}
thead {
padding-right: 20px;
}
I set padding-right to thead because of the scrollbar on tbody.
Did you tried to like this?
Change your css like this
.custom-table> tbody {
display:block;
height:50px;
overflow:auto;
}
.custom-table> thead, tbody tr {
display:table;
width:100%;
}
.custom-table> thead {
width: 100%
}
.custom-table {
width:100%;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.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>
<div class="table-responsive">
<table class="table table-striped table-hover custom-table text-nowrap">
<thead>
<tr>
<th>row1</th>
<th>row2</th>
<th>row2</th>
</tr>
</thead>
<tbody>
<tr>
<td>text1</td>
<td>text2</td>
<td>text3</td>
</tr>
<tr>
<td>text4</td>
<td>text5</td>
<td>text6</td>
</tr>
<tr>
<td>text7</td>
<td>text8</td>
<td>text9</td>
</tr>
</tbody>
</table>
</div>
Using Udara Kasun's solution, but making the columns lines up:
.custom-table>tbody {
display: block;
height: 50px;
overflow: auto;
}
.custom-table>thead,
tr {
display: block;
width: 100%;
}
.custom-table>thead {
width: 100%
}
.custom-table {
width: 100%;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<div class="container-fluid">
<div class="flex-group-1" style="overflow-y: auto">
<table class="table table-striped table-hover custom-table table-bordered table-responsive ">
<thead>
<tr>
<th width="100">col1</th>
<th width="100">col2</th>
<th width="100">col3</th>
</tr>
</thead>
<tbody>
<tr>
<td width="100">text1</td>
<td width="100">text2</td>
<td width="100">text3</td>
</tr>
<tr>
<td width="100">text4</td>
<td width="100">text5</td>
<td width="100">text6</td>
</tr>
<tr>
<td width="100">text7</td>
<td width="100">text8</td>
<td width="100">text9</td>
</tr>
</tbody>
</table>
</div>
</div>
Bootstrap 5
Table with fixed heading row & vertically scrollable tbody
CSS Only
You have to put the table within a div
HTML:
<!-- Table -->
<div class="container shadow-sm alarm-table">
<table class="table">
<thead class="table-primary">
<tr>
<th scope="col">ID</th>
<th scope="col">Name</th>
<th scope="col">Email</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
<tr>
<td>1</td>
<td>John</td>
<td>john#email.com</td>
</tr>
</tbody>
</table>
</div>
CSS:
/* Makes table scrollable */
.alarm-table{
height: 150px;
overflow: auto;
}
/* Makes table heading-row stick to top when scrolling */
.container .table thead tr{
position: sticky;
top: 0;
}
I want to apply a background color for the first row in the table. I gave that row a special class name. I also want to apply another color for the rest of the table's rows. The row colors do not get applied.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
You're problem is with specificity and order - as you have put the light blue on the td, you need to override that with the yellow on the td too.
You then need to move the yellow declaration below the initial declaration as it is to the same specificity - this means order of the statements matter.
One final thing - remove display:block from the table, otherwise you will break the layout of the table.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
border: 1;
width:100%;
/* remove display block from here otherwise your table layout will break */
}
/*put this first*/
.table td {
background-color: lightblue;
}
/*override with this*/
.head td {
background-color: yellow;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
More information on css specificity
One solution is to increase the specificity of the CSS settings for .head
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.table .head {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200 > text here </td>
</tr>
<tr id="second-row">
<td width=200 > text here </td>
<td width=200 >text here </td>
</tr>
</table>
</body>
</html>
Btw, I just noticed that you use table as a class, maybe you should use another name ... more specific
In addiction to Pete's answer, I would like to say that if you want to create a table header to use the proper tag <th>
<tr>
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
The <th> tag defines a header cell in an HTML table.
An HTML table has two kinds of cells:
Header cells - contains header information (created with the element)
Standard cells - contains data (created with the element) The text in elements are bold and centered by default.
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head" class="head">
<th class="head">Name</th>
<th class="head">Type</th>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
</html>
Remove the class head in the tr then add !important. For some reason the color is not changing without !important even if I re-arranged the css
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow !important;
}
/*I want the rest of the table rows this color*/
.table td {
background-color: lightblue;
}
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<tr id="head">
<td class="head">Name</td>
<td class="head">Type</td>
</tr>
<tr id="initial-row">
<td width=200> text here</td>
<td width=200> text here </td>
</tr>
<tr id="second-row">
<td width=200> text here </td>
<td width=200>text here </td>
</tr>
</table>
</body>
As #Pete mentioned, your specificity is incorrect. On a side note, your HTML markup could be improved to use the <thead> also and then your css could simply target <th> elements within the <thead>. This is better for accessibility as it clearly defines you "head" as a table header.
Take a look at the w3c docs on <table> markup for accessibilty # https://www.w3.org/WAI/tutorials/tables/
or for general information about the markup check out the amazing Mozilla documentation # https://developer.mozilla.org/en/docs/Web/HTML/Element/table
Something like this:
.table {
font-family: sans-serif;
width: auto;
overflow: auto;
display: block;
border: 1;
}
/*I want the row with class head to be this color*/
thead th {
background-color: yellow;
}
/*I want the rest of the table rows this color*/
tbody td {
background-color: lightblue;
}
<html>
<head>
<link rel="stylesheet" type="text/css" href="new-style.css">
<meta charset="UTF-8">
</head>
<body id="body">
<table align='center' cellspacing=0 cellpadding=1 id="table" border=1 class="table">
<thead>
<tr id="head">
<th>Name</td>
<th>Type</td>
</tr>
</thead>
<tbody>
<tr class="initial-row">
<td>Text here</td>
<td>Text here</td>
</tr>
<tr class="second-row">
<td>Text here</td>
<td>Text here</td>
</tr>
</tbody>
</table>
</body>
</html>
<tr id="head" class="head">
<th class="head">Name</td> <!-- change to th (table heading) -->
<th class="head">Type</td>
</tr>
css:
th{
background-color: yellow;
}
/*I want the rest of the table rows this color*/
.table tr {
background-color: lightblue;
}
/*I want the row with class head to be this color*/
.head {
background-color: yellow;
}
I think that should be codes above.
I have a simple bootstrap table that I am trying to have vertically scroll automatically. The reason for this, is that the table will be displayed on a screen and the table could have 10 items in it or 100. So I would like it to auto scroll vertically so the user does not have to do it manually. After it reaches the end, it will just reset and start back from the top...
This is my markup thus far:
<div class="table-responsive" style="height: 700px; overflow: auto;">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
NOTE: I am hoping this can be achieved with only HTML and CSS.
Any suggestions?
JS (or jQuery) is needed to get the actual element height and scrollHeight and perform the animation on those values
var $el = $(".table-responsive");
function anim() {
var st = $el.scrollTop();
var sb = $el.prop("scrollHeight")-$el.innerHeight();
$el.animate({scrollTop: st<sb/2 ? sb : 0}, 4000, anim);
}
function stop(){
$el.stop();
}
anim();
$el.hover(stop, anim);
.table-responsive{
height:180px; width:50%;
overflow-y: auto;
border:2px solid #444;
}.table-responsive:hover{border-color:red;}
table{width:100%;}
td{padding:24px; background:#eee;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr><th>#</th></tr>
</thead>
<tbody>
<tr><td>1</td></tr>
<tr><td>2</td></tr>
<tr><td>3</td></tr>
<tr><td>4</td></tr>
<tr><td>5</td></tr>
<tr><td>6</td></tr>
<tr><td>7</td></tr>
<tr><td>8</td></tr>
<tr><td>9</td></tr>
<tr><td>10</td></tr>
</tbody>
</table>
</div>
I highly recommend using using javascript for this. I tried this using CSS only once and then promptly abandoned the idea, but it is theoretically possible. The following demo is not tested on all browsers, has huge compatibility issues, and was the jankiest thing ever on Safari. Moral of the story: use javascript.
#import url(https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css);
.table-responsive {
overflow-x: hidden;
}
table.table {
animation: ani linear 1s alternate infinite;
}
.table-responsive:hover {
overflow: auto;
}
.table-responsive:hover table.table {
animation: none ;
}
#keyframes ani {
0% { margin-left: 0; transform: translate3d(0%, 0, 0);}
25% { margin-left: 0; transform: translate3d(0%, 0, 0);}
75% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
100% { margin-left: 100%; transform: translate3d(-100%, 0, 0);}
}
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
<div class="table-responsive">
<table class="table table-bordered table-hover">
<thead>
<tr>
<th style="text-align: left; font-size: 23px;">#</th>
<th style="text-align: left; font-size: 23px;">Name</th>
<th style="text-align: left; font-size: 23px;">Description</th>
<th style="text-align: left; font-size: 23px;">Date</th>
</tr>
</thead>
<tbody>
<tr class="danger">
<td style="text-align: left; font-size: 16px;">1213</td>
<td style="text-align: left; font-size: 16px;">John Doe</td>
<td style="text-align: left; font-size: 16px;">my short description</td>
<td style="text-align: left; font-size: 16px;">Today's Date</td>
</tr>
</tbody>
</table>
</div>
The code below will not reset and start back from the top the table as asked in the question, but this will help some future readers who trying to scroll and loop the table rows automatically with a fixed header.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$.fn.infiniteScrollUp=function(){
var self=this,kids=self.children()
kids.slice(20).hide()
setInterval(function(){
kids.filter(':hidden').eq(0).fadeIn()
kids.eq(0).fadeOut(function(){
$(this).appendTo(self)
kids=self.children()
})
},1000)
return this
}
$(function(){
$('tbody').infiniteScrollUp()
})
</script>
<title>infiniteScrollUp</title>
</head>
<body>
<table>
<colgroup><col /><col /><col /><col /><col /><col /></colgroup>
<thead>
<tr><th>a</th><th>b</th><th>c</th><th>d</th><th>e</th><th>f</th></tr>
</thead>
<tbody>
<tr><td>1a</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1b</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1c</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1d</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1e</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1f</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1g</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1h</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1i</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1j</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1k</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1l</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1m</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1n</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1o</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1p</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1q</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1r</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1s</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1t</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1u</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1v</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1w</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1x</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1y</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
<tr><td>1z</td><td>2</td><td>3</td><td>4</td><td>5</td><td>6</td></tr>
</tbody>
</table>
</body>
</html>
How do I get my panel width to only be big enough to contain my table?
Plunker: http://embed.plnkr.co/o0PDPAeo2lnLKNU55Ber/preview
The number of table columns are dynamic so I can't set it to a fixed width.
<div class="container">
<div class="table-responsive standings">
<div class="panel panel-primary">
<div class="table-responsive standings">
<table class="table table-striped table-condensed entry-grid">
<thead>
<tr>
<th>Name</th>
<th class="text-center">Strikes</th>
<th class="text-center pick-title">1</th>
...
<th class="text-center pick-title">12</th>
</tr>
</thead>
<tbody>
<tr>
<td>Entry 1</td>
<td class="text-center">1</td>
...
<td class="text-center pick">A</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
.container {
width: 750px;
padding: 20px;
}
.standings > table {
width: auto;
}
.standings .pick-title {
width: 42px;
}
.standings .pick {
height: 41px;
width: 41px;
padding: 8px 0;
font-size: 10px;
}
Thanks
You will want to give a display Inline-Block to your panel DIV. This way, the panel will adjust to it's content width
.panel{
display: inline-block;
}