With tailwindcss 2 I want to hide some columns in the table on small devices using sm:hidden:
<table class="table-auto">
<thead class="bg-gray-700 border-b-2 border-t-2 border-gray-300">
<tr>
<th class="py-2">Name</th>
<th class="py-2">Active</th>
<th class="py-2">Type</th>
<th class="py-2 sm:hidden">Category</th>
<th class="py-2 sm:hidden">Mailchimp Id</th>
<th class="py-2"></th>
</tr>
</thead>
<tbody>
<tr>
<td class="">
Name content
</td>
<td class="">
Active content
</td>
<td class="">
Typecontent
</td>
<td class=" sm:hidden">
Category content
</td>
<td class="sm:hidden">
mailchimp content
</td>
I expected that on devices 640px and smaller 2 columns would be hidden, but failed.
Which syntax is correct?
Thanks
Tailwind uses a mobile first breakpoint system, meaning, if you use hidden class, it will affect all the screen sizes. But if you attach a prefix such as sm, md, lg, xl and 2xl it will target the corresponding screen size and above it. You can read more about it here.
For example, using sm:hidden will only hide the element on sm and above screen size. So, you could combine it together such as, hidden md:table-cell it will not show on screen size lower than sm breakpoint.
Here you have an example.
<table class="whitespace-nowrap">
<thead>
<tr>
<th>Name</th>
<th>Active</th>
<th class="hidden md:table-cell">Type</th>
<th class="hidden md:table-cell">Category</th>
<th class="hidden lg:table-cell">Mailchip</th>
<th class="hidden lg:table-cell">other</th>
</tr>
</thead>
<tbody>
<tr>
<td>Name content</td>
<td>Active content</td>
<td class="hidden md:table-cell">Type content only in md</td>
<td class="hidden md:table-cell">Category content only in md</td>
<td class="hidden lg:table-cell">Mailchip content only in lg</td>
<td class="hidden lg:table-cell">other content only in lg</td>
</tr>
</tbody>
</table>
And here you have all the display properties to play around with a bit more. (Remember to combine it with the hidden property + the responsive variants sm:, md:, lg:, xl:, 2xl:)
as a more general answer, not regarding table cells, another display type can be chosen to overwrite hidden.
https://tailwindcss.com/docs/display
example:
<p class="hidden lg:flex">Only visible on larger than lg</p>
Related
I am using in my ASP .NET Razor Page and it scales very nicely when i decrease the width of my browser. However, when i increase the width of my browser, it does not increase anymore. I want it to increase in size as it has too much white space on the sides.
In the code below i tried style="width:100%" or even changing the margins but it doesn't scale due to large screens. I also tried using container-fluid class and it doesn't work. Need a solution.
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Bob</td>
</tr>
<tr>
<td>2</td>
<td>Bobby</td>
</tr>
</table>
Try setting the display as table
display:table
If the table is inside any other tags like div, try setting it width to 100% as well and the display of div is block
Did you put the table in a container-flex? (Bootstrap 4) If not the 100% table width is the same as the normal Bootstrap container width where the table is in.
<div class="container-flex">
<div class="row">
<div class="col">
<table class="table table-bordered">
<thead>
<tr>
<th>No</th>
<th>Name</th>
</tr>
</thead>
<tr>
<td>1</td>
<td>Bob</td>
</tr>
<tr>
<td>2</td>
<td>Bobby</td>
</tr>
</table>
</div>
</div>
</div>
I'm trying to create (using Semantic-UI and knockoutjs) a data table where each row has an expandable item (accordion) to show a sub-table of data related to the expanded row.
I have tried to use colspan="4" on my sub-table's <td> element, to no avail. No matter what I try, the sub-table seems to only exist within the first column of the parent table. The jsfiddle below demonstrates the issue better than my description, I'm sure.
https://jsfiddle.net/xpvt214o/908333/
This may be a simple CSS issue -- I'm no expert -- but nothing I've tried works for me. I also tried wrapping the sub-table as a <div>, but that seemed to break the accordion from collapsing.
<table class="ui celled table accordion">
<thead><tr>
<th ></th>
<th >ID</th>
<th>Name</th>
<th >FK1 ID</th>
<th >FK2 ID</th>
</tr></thead>
<tbody data-bind="foreach: arrayVM">
<tr class="ui title">
<td><i class="dropdown icon"></i></td>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: fk1id"></td>
<td data-bind="text: fk2id"></td>
</tr>
<tr style="display:none">
<td colspan="5" class="ui content">
<table class="ui inverted celled table" style="width:700px">
<tbody>
<tr>
<td><i class="ui logo add icon"></i></td>
<td data-bind="text: id"></td>
<td>column2</td>
<td>column3</td>
<td>column4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I would like to get the header of my table fixed, so it could be always visible while scrolling down. The height of my table would be fixed to 500 px.
Here is a plunkr:
enter link description here
<table class="table table-striped table-bordered">
<thead>
<tr>
<th style="text-align:center">Produit</th>
<th style="text-align:center">Emballage</th>
<th style="text-align:center">Certificat Fourn.</th>
<th style="text-align:center">Marque</th>
<th style="text-align:center">Catégorie</th>
<th style="text-align:center">Calibre</th>
<th style="text-align:center" colspan="3">20/03</th>
<th style="text-align:center" colspan="3">21/03</th>
<th style="text-align:center" colspan="3">22/03</th>
<th style="text-align:center" colspan="3">23/03</th>
</tr>
<tr>
<th colspan="6"></th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
<th>Rsr</th>
<th>Arr</th>
<th>Dsp</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="planning in data">
<td style="text-align:center">
{{planning.produit}}
</td>
<td style="text-align:center">
{{planning.emballage}}
</td>
<td style="text-align:center">
{{planning.certificatFournisseur}}
</td>
...
<td style="text-align:center">
{{planning.dispJ4}}
</td>
</tr>
</tbody>
</table>
I have looked over the net, but I didn"t find any nice solution.
Thanks for you help.
You have to split your table to one with headers and a second one with data. Then add javascript that on scroll (detect if the position of your header table are near the 0 of screen and if yes then add css style for your header table -> position:fixed top:0px ;
you will also have a reverse javascript for removing position: fixed when viewer scroll up.
EDIT
If you dont care to lose table from page you can juse use 2 tables (header and content) put content's table's height = 500px - header's table's height and for content's table css overflow:scroll
I have found a solution that works pretty well on one of my tables.
I have tried to apply it to another table but I am getting differences between td width and th width. I don't know why, even if I set the same width to each one of them.
If anyone can explain to me the reason why...
Thanks!
Plunkr :
http://plnkr.co/edit/kDxIYzmO6onqqZcZIURc?p=preview
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap-css#*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div>
<table class="table table-bordered table-hover" style="font-size:11px;table-layout: fixed; margin-bottom:0px">
<thead>
<tr>
<th style="text-align:center;width:168px">Fournisseur</th>
<th style="text-align:center;width:148px">Désignation</th>
<th style="text-align:center;width:81px">Date</th>
<th style="text-align:center;width:53px">Colis</th>
<th style="text-align:center;width:53px">Brut</th>
<th style="text-align:center;width:53px">Tare</th>
<th style="text-align:center;width:78px">Poids net</th>
<th style="text-align:center;width:58px">Pièces</th>
<th style="text-align:center;width:68px">Palette</th>
<th style="text-align:center;width:53px">Valo</th>
<th style="text-align:center;width:98px">Prix unit ht</th>
<th style="text-align:center;width:58px">H.T.</th>
<th style="text-align:center;width:58px">Tva</th>
</tr>
</thead>
</table>
<div class="wrap_scrollable">
<div class="scrollable">
<table class="table table-bordered" style="font-size:11px;table-layout: fixed">
<tbody>
<!-- ngRepeat: frais in listeFrais -->
<tr >
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALIMEA</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-50</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
<tr>
<td style="text-align:center;width:168px;word-wrap: break-word" class="ng-binding">ALBA BIO COOP</td>
<td style="text-align:center;width:148px;word-wrap: break-word" class="ng-binding">Triage</td>
<td style="text-align:center;width:81px;word-wrap: break-word" class="ng-binding">2015-04-01</td>
...
<td style="text-align:center;width:98px;word-wrap: break-word" class="ng-binding">2</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">-20</td>
<td style="text-align:center;width:58px;word-wrap: break-word" class="ng-binding">0</td>
</tr>
<!-- end ngRepeat: frais in listeFrais -->
</tbody>
</table>
</div>
</div>
</div>
</body>
</html>
How do you set the size of a column in a Bootstrap responsive table? I don't want the table to loose its reponsive features. I need it to work in IE8 as well. I have included HTML5SHIV and Respond.
I'm using Bootstrap 3 (3.2.0)
<div class="table-responsive">
<table id="productSizes" class="table">
<thead>
<tr>
<th>Size</th>
<th>Bust</th>
<th>Waist</th>
<th>Hips</th>
</tr>
</thead>
<tbody>
<tr>
<td>6</td>
<td>79 - 81</td>
<td>61 - 63</td>
<td>89 - 91</td>
</tr>
<tr>
<td>8</td>
<td>84 - 86</td>
<td>66 - 68</td>
<td>94 - 96</td>
</tr>
</tbody>
</table>
</div>
Bootstrap 4.0
Be aware of all migration changes from Bootstrap 3 to 4. On the table you now need to enable flex box by adding the class d-flex, and drop the xs to allow bootstrap to automatically detect the viewport.
<div class="container-fluid">
<table id="productSizes" class="table">
<thead>
<tr class="d-flex">
<th class="col-1">Size</th>
<th class="col-3">Bust</th>
<th class="col-3">Waist</th>
<th class="col-5">Hips</th>
</tr>
</thead>
<tbody>
<tr class="d-flex">
<td class="col-1">6</td>
<td class="col-3">79 - 81</td>
<td class="col-3">61 - 63</td>
<td class="col-5">89 - 91</td>
</tr>
<tr class="d-flex">
<td class="col-1">8</td>
<td class="col-3">84 - 86</td>
<td class="col-3">66 - 68</td>
<td class="col-5">94 - 96</td>
</tr>
</tbody>
</table>
bootply
Bootstrap 3.2
Table column width use the same layout as grids do; using col-[viewport]-[size]. Remember the column sizes should total 12; 1 + 3 + 3 + 5 = 12 in this example.
<thead>
<tr>
<th class="col-xs-1">Size</th>
<th class="col-xs-3">Bust</th>
<th class="col-xs-3">Waist</th>
<th class="col-xs-5">Hips</th>
</tr>
</thead>
Remember to set the <th> elements rather than the <td> elements so it sets the whole column. Here is a working BOOTPLY.
Thanks to #Dan for reminding me to always work mobile view (col-xs-*) first.
You could use inline styles and define the width in the <th> tag. Make it so that the sum of the widths = 100%.
<tr>
<th style="width:10%">Size</th>
<th style="width:30%">Bust</th>
<th style="width:50%">Waist</th>
<th style="width:10%">Hips</th>
</tr>
Bootply demo
Typically using inline styles is not ideal, however this does provide flexibility because you can get very specific and granular with exact widths.
you can use the following Bootstrap class with
<tr class="w-25">
</tr>
for more details check the following page
https://getbootstrap.com/docs/4.1/utilities/sizing/
I have a three column layout, in which I have two tables connected back to back in the third column:
<div class="span2">
..
</div>
<div class="span7">
..
</div>
<div class="span3">
<h4>Betslips: </h4>
<table class="table table-stripped table-hover table-condensed" id="RecentContests">
<caption class="text-left">My Backs</caption>
<thead>
<tr></tr>
</thead>
<tbody>
<tr class ="success">
<td>King Rama</td>
<td>4.5</td>
<td>1000$</td>
<td>3500$</td>
<td>Matched</td>
<td>X</td>
</tr>
<tr class ="success">
<td>The Favorite</td>
<td>1.5</td>
<td>550$</td>
<td>750$</td>
<td>Matched</td>
<td>X</td>
</tr>
</tbody>
</table>
<table class="table table-stripped table-hover table-condensed">
<caption class="text-left">My Lays</caption>
<tbody>
<tr class ="error">
<td>Dare Devil</td>
<td>4.5</td>
<td>1000$</td>
<td>3500$</td>
<td>Pending</td>
<td>X</td>
</tr>
<tr class ="error">
<td>Irish Win</td>
<td>5.5</td>
<td>150$</td>
<td>2500$</td>
<td>Pending</td>
<td>X</td>
</tr>
</tbody>
</table>
When opened in browser it computes different widths for the tables, according to me it should be the same, any idea why is it happening and how to prevent it? I would like the second table to be the same width as of the first one.
By default, the tables will only be wide enough to accommodate their content, so there's little chance of them being the same width. To make them display the same width, consider setting a width via CSS. E.g.
table {width: 600px;}
or
table {width: 100%;}
You can also make the tables look more even and alike by adding
table {table-layout: fixed;}
It could be the span3 class in on the div, I've seen bootstrap, you might want to just size the table yourself.