How can I centralize a thead text in HTML tables?
I'm trying this:
...
<thead rowspan="3" align="center">
<th> Table </th>
</thead>
...
<th style="text-align: center"> Table </th>
Try giving th width of 100% with text-aling:center as style property
Related
I've got a mouseover and mouseout on my table rows to show links as I hover over. For some reason it when I hover over the rows it shrinks my thead and the links freakout. I cannot figure it out for the life of me. How can I fix this?
Here is the section of my html:
<table class="table" id="sessions">
<thead>
<tr>
<th scope="col">Sessions</th>
<th scope="col" id="trigger">Next Trigger</th>
</tr>
</thead>
<tbody>
<tr *ngFor="let row of tableTwo" (mouseover)="showLinks=true" (mouseout)="showLinks=false">
<td scope="row">{{row.session}}</td>
<td *ngIf="showLinks" scope="row">
View
Edit
Trigger Now
</td>
<td scope="row" id="trigger">{{row.nextTrigger}} </td>
</tr>
</tbody>
</table>
You have only 2 header columns in thead, but there are actually 3 columns when rows are generated.
Add one more column in head to balance.
<th scope="col">Sessions</th>
<th *ngIf="showLinks"></th>
<th scope="col" id="trigger">Next Trigger</th>
I have a table that has many columns and I am using jquery-datatables. I want this table to fit on his container but the table goes over it! I am using bootstrap table-responsive and as you see there is a scroll bar in the buttom of the table!
<div class="table-responsive"></div>
It also is not getting smaller when the page is resized! can anyone help me ??
here is my plunker:
https://plnkr.co/edit/5LsDrsRPexXHpsWoSRFr?p=preview
Just use table width 100% css. It will make the scroll able with fixed container.
<div class="table-responsive">
<table class="table table-bordered table-striped table-condensed flip-content" id="topPerformerTable" width="100%">
<thead style="background:#C0C0C0;">
<tr>
<th style="padding-left: 15px;"> Id </th>
<th> Product Name </th>
<th> Total Events </th>
<th> Total Revenue </th>
<th> Rental Time </th>
</tr>
</thead>
<tbody>
</tbody>
</table>
</div>
i'm beginner who just started
i've tried to following video of creating forum using bootstrap 4 in youtube
but table-responsive doesn't work
i think my code is same as in video but browser not the same
my broswer
browser in youtube
here's my table. i hope someone help me..
thanks
<table class="table table-striped table-bordered table-responsive">
<thead class="thead-light">
<tr>
<th scope="col" class="forum-col">Forum</th>
<th scope="col">Topics</th>
<th scope="col">Posts</th>
<th scope="col" class="last-post-col">Last post</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<h3 class="h5">Forum name</h3>
<p>ddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddddd</p>
</td>
<td>
<div>5</div>
</td>
<td>
<div>18</div>
</td>
<td>
<h4 class="h6">Post name</h4>
<div>by Author name</div>
<div>05 Apr 2017, 20:07</div>
</td>
</tr>
<tbody>
you should wrap the table in element and take the .table-responsive class out of tag and put that class in wrapping div element. .table-responsive class should include break point size for example .table-responsive-sm
<div class="table-responsive-sm">
<table class="table table-dark table-hover">
<thead>
<tr>
<th>.</th>
Your first TD is not set to word wrap. You can add the following CSS declaration to your TD elements to resolve this issue:
word-break:break-all;
Since the td content length is so high. You need to break the words inorder to get responsive table
Look at this Fiddle JSFiddle
CSS:
td{
word-break:break-all;
}
In My ASP.NET Application, I have a table.
Eventhough I set column width, it changes in the browser (100px column becomes 96px or 108px).
I have div inside the th tag. If I set 100px width to the div, It comes out of the th as the rendered column width is 96px. What's the solution for making the column width exact ?
Please Don't tell me to make 100% width for div, as its using absolute position (For making the table header fixed.)
<table border="0" cellpadding="1">
<tr>
<th align="center" width="100px">
<div style="width:100px;">PV#</div>
</th>
<th align="center" width="90px">
<div style="width:90px;">Date</div>
</th>
<th align="center" width="100px">
<div style="width:100px;">Payment Doc#</div>
</th>
<th align="center" width="410px">
<div style="width:410px;">SOA Payments</div>
</th>
<th align="center" width="100px">
<div style="width:100px;">Payment Made</div>
</th>
</tr>
</table>
Your TH tags have padding on your example. To have the exact width of the div inside each TH you need to set padding to 0.
<table border="0">
<tr>
<th style="padding:0;">
<div style="text-align:center;width:100px;">PV#</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:90px;">Date</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:100px;">Payment Doc#</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:410px;">SOA Payments</div>
</th>
<th style="padding:0;">
<div style="text-align:center;width:100px;">Payment Made</div>
</th>
</tr>
</table>
Since all th and div have fixed width, it is not changing width as you mentioned.
cellpadding="1" this will add 2px to the th width.
This is my code:
I need to add a scroll bar in the body of the table, the header must remain constant.
The body cells are not properly fixing if I add a scroll bar.
I need to add a scroll bar in the body of the table, the header must remain constant.
The body cells are not properly fixing if I add a scroll bar.
<table width="600" border="1" style="border-collapse:collapse; border: 1px solid #AEAEAE;" cellpadding="0" cellspacing="0">
<tr>
<th rowspan="2">
Title
</th>
<th rowspan="2">
Title
</th>
<th colspan="4">
Title
</th>
<th colspan="2">
Title
</th>
</tr>
<tr>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
<th>
Title
</th>
</tr>
<td height="400">
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
<td>
Body
</td>
</tr>
Just give the table's tbody element a height and a scrolling overflow.
Like this:
.tableClass tbody
{
height: 300px; /* Random number I chose */
overflow: scroll /* you can be more specific and use overflow-y */
}
Edit:
I saw your code and your not using <tbody> and <thead>. Read about them. The general idea is to wrap the table's content with one element, and to wrap the table's headings with one element.
Here's a working example:
http://www.imaputz.com/cssStuff/bigFourVersion.html
None of the other solutions I've found met all my requirements, so I created a very lightweight jQuery plugin to do this. It supports fixed header, footer, column spanning (colspan), resizing, and an optional number of rows to display before scrolling starts.
jQuery.scrollTableBody (GitHub)
As long as you have a table with proper <thead>, <tbody>, and (optional) <tfoot>, all you need to do is this:
$('table').scrollTableBody();