I need to fix the width of the header columns in my Bootstrap 3 table, regardless of the content in the regular rows. This is to avoid content being separated onto two lines as you can see below, which looks awfully untidy:
Is there any way to do this, preferably without toying with the padding for every table row as I'm happy with the current spacing. You can see the full table at http://find-minecraft-servers.com/, and I've included the HTML, and custom CSS associated with the table below. The content for the table is generated by PHP, so the length of the values in each table cell is subject to change.
<table class="table bigtable" width="100%;">
<thead>
<tr>
<th class="text-center"><i class="fa fa-list-ol"></i> RANK</th>
<th class="text-center"><i class="fa fa-info-circle"></i> NAME</th>
<th class="text-center"><i class="fa fa-server"></i> SERVER</th>
<th class="text-center">
<a href="?sort=votes" style="text-decoration:none;color:#fff;">
<i class="fa fa-thumbs-o-up"></i> VOTES <i class="fa fa-sort" style="color:#84fb88;"></i>
</a>
</th>
<th class="text-center"><i class="fa fa-dashboard"></i> STATUS</th>
<th class="text-center">
<a href="?sort=players" style="text-decoration:none;color:#fff;">
<i class="fa fa-users"></i> PLAYERS <i class="fa fa-sort" style="color:#84fb88;"></i>
</a>
</th>
</tr>
</thead>
<tbody>
CONTENT...
</tbody>
</table>
Custom.css:
.bigtable thead {
background-color: #12bbb9;
color: #fff;
font-size: 14px;
}
.bigtable thead tr th {
padding:8px 5px 8px 5px;
}
Add table-layout:fixed to the table, then give width to the th containing the large image.
.table {
margin-bottom: 20px;
max-width: 100%;
table-layout: fixed; /*newly added*/
width: 100%;
}
Related
I have a table and in one of the columns exists two icons.
here is the pic
this is the code:
<td>
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
I need the icons to be in the same line and the same height as the other icons.
So I added display: flex.
And get this result:
And since I need the icons to be in the same line as the other I used:
padding-top: 23px and get this results
The problem is when I hover with the mouse on the line, in this place exists the white or blank space.
The white space starts exactly after I used display flex, and reduces a little after I used padding top.
I do not want this white blank, so when I hover all the line will be blue as before (first pic).
can someone assist
this is my new code:
<td style="display: flex;padding-top: 23px;">
<i class="zmdi zmdi-plus-circle-o text-success"></i>
<i class="zmdi zmdi-help zmdi-hc-fw" data-toggle="tooltip" data-placement="top" data-container="body" data-html="true" title="" data-original-title="ADD"></i>
</td>
this is the computed tab
If I do this in the developer tools it solved, how to do it via code?
Take a look, I have created an example and it works, so you should check CSS code.
If you cannot provide CSS code how can I help?
table {
border: 1px solid red;
width: 50%;
}
<table>
<tr>
<td style="display: flex;">
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-plus-circle-o text-success"></i>
<i style="width: 25px;height: 25px;border: 1px solid blue;display: unset;"
class="zmdi zmdi-help zmdi-hc-fw"
data-toggle="tooltip"
data-placement="top"
data-container="body"
data-html="true" title=""
data-original-title="ADD">
</i>
</td>
</tr>
</table>
I wanted to add an icon with a tooltip to a bootstrap table and wow I have failed miserably. it seems to be aligning the flair way over on the left and I would like it to be closer to the thing that the icon/tooltip refers to.
So if you look at this link:
JSFIDDLE
You should notice that no matter how big the table is, the "CPU" column is pushing the column to the left of it all the way over to the left margin of the table.
(this is an image of what it looks like when font awesome actually works)...The image shows the insane gap between the 'flair' and the CPU description. Does anyone know why it is giving the CPU column such an insane berth?
enter link description here
.product-table {
margin-top: 50px;
th {
color: $dark-gray;
padding: 20px 7px;
i {
color: $green;
font-size: 26px;
}
}
a {
color: $text;
&:hover {
color: $green;
text-decoration: none;
}
}
.product-table-body {
border: 1px solid $lightest-gray;
td {
padding: 15px 7px;
}
tr:nth-child(2n+1) {
background-color: $lightest-gray;
}
}
}
<section>
<h2 class="text-center">Things and Stuff</h2>
<div class="table-responsive">
<table class="w-100 text-center product-table">
<tr>
<th></th>
<th><i class="fal fa-microchip"></i><br>CPU</th>
<th><i class="fal fa-database"></i><br>Storage</th>
<th><i class="fal fa-memory"></i><br>RAM</th>
<th><i class="fal fa-desktop"></i><br>IPs</th>
<th><i class="fal fa-tachometer-alt-fast"></i><br>Bandwidth</th>
<th><i class="fal fa-hand-holding-usd"></i><br>Monthly</th>
<th></th>
</tr>
<tr>
<td>
<span style="color: #6e9c23;">
<i class="fal fa-fire fa-2x" data-toggle="tooltip" data-placement="left" title="Recommended"></i>
</span>
</td>
<td>Xeon E3-1245v5 (4x3.5GHz)</td>
<td>1x1TB</td>
<td>16GB</td>
<td>5</td>
<td>10000GB</td>
<td>$89</td>
<td><div class="d-inline-block"><i class="fas fa-chevron-right"></i></div></td>
</tr>
</table>
</div>
</section>
It looks like your column's width is set at a certain percentage of the table. Since the table takes up a percentage of the screen, the column's size can be different on larger/smaller screens. I'd recommend setting a width value for the table so it's the same size on different screens.
Hope this helps.
I am wondering how to make a dot for example here https://gyazo.com/b757f6e984c19f7f4fc433f8147a5103 float on top like that I don't understand how I would do this I have tried position absolute and putting it in the which is in the tbody and it has not worked. Here is my code:
<tr>
<th scope="row">
<i class="active"></i>
<p>magic</p>
</th>
<td>magic</td>
<td>magic</td>
<td>
<p>magic</p>
</td>
<td>
<p>magic</p>
</td>
<td>
<div class="dropdown">
<button class="btn dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true">
<i class="material-icons">more_vert</i>
</button>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
<li><i class="material-icons"></i>Start</li>
<li><i class="material-icons"></i>Stop</li>
<li><i class="material-icons"></i>Delete</li>
</ul>
</div>
</td>
</tr>
I think you want something like this:
<html>
<head>
<style>
.box {
width: 80%;
height:40px;
background: red;
z-index: 1;
position: absolute;
}
.dot {
width: 25px;
height: 25px;
border-radius: 50%;
background: green;
top: 20%;
right: 0%;
transform: translate(50%);
position: absolute;
}
</style>
</head>
<div class="box"><div class=dot></div></div>
basicly you need to have a dot that should float out of the div right?
In this case, you just need to set position: absolute; then set in what side the dot should be, for example if you want a dot just like in the picture you need to set the right: 0% but it will still be inside the div, so add transform: translate(-50%, 0%) and it will do the job if you have question just comment, hope i solved the problem!
Please See here, you might be looking for this.
Demo: https://plnkr.co/edit/qM6rnLCEtgG3TQkxQjOe?p=preview
<table>
<thead>
<tr>
<th>Name</th>
<th>Ip Address</th>
<th>Created</th>
<th>DataCenter</th>
<th>Tags</th>
<th>
<div class="dropdown">
<button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">More_vert
<span class="caret"></span>
</button>
<ul class="dropdown-menu">
<li>
Start
</li>
<li>
Stop
</li>
<li>
Delete
</li>
</ul>
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td style="position:relative;padding-left:20px;">Name_xxx
<div class="circle"></div></td>
<td>123.168.1.40:8080</td>
<td>12-10-2010</td>
<td>ABC_XXX</td>
<td>
<input type="radio">
</td>
<td> </td>
</tr>
</tbody>
</table>
here get an example table code. Hope you helpful.
https://jsfiddle.net/rafalito1989/d6pxf26x/
I have this sample:
link
CODE HTML:
<table class="table prospects-table">
<thead>
<tr>
<th width="200">Name</th>
<th width="200">Email</th>
<th width="200">Phone</th>
<th width="200">Message</th>
<th width="200">Actions</th>
</tr>
</thead>
<tbody>
<tr>
<td width="200">test sdada</td>
<td width="200">asdsada#yahoo.com</td>
<td width="200">(321) 312-3123</td>
<td width="200"> sadasda</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
<tr>
<td width="200">Diaconescu Cristian</td>
<td width="200">asdsadsa#busteco.rh</td>
<td width="200">(312) 312-3123</td>
<td width="200">asdasadsdasasasasdkhsdjkashsdkjahdhjsgdhjgvhhs,ajfkghjkdjhdsgjhasdghjgsadhjgshjkhvjgjkgfkjhdkjjhgfhjkdhkjsgdfv</td>
<td width="200">
<div class="in-line">
<i class="fa fa-pencil-square-o"></i>
<span>Edit</span>
</div>
<div class="in-line">
<i class="fa fa-users "></i>
<span>Transfer</span>
</div>
<div class="in-line">
<i class="fa fa-trash-o"></i>
<span>Delete</span>
</div>
</td></tr>
</tbody>
</table>
I want each column of my table to have a width of 200px.
I added this code to each td but does not work ...
<td width="200">test sdada</td>
Probably something simple but I realize why this code does not work.
Can you tell me please what is the problem and how to solve it?
Thanks in advance!
Why don't you just add a style tag to your code?
In the head just insert this:
<style>
td,th {width:200px}
</style>
Add table-layout: fixed; to your table
table{
table-layout: fixed;
}
Updated codepen
use this
<td style="width: 200px;">test sdada</td>
learn proper css take a loot at element level css here
you can add css :
style="width:200px";
DEMO HERE
try this one
<td width="70%">JXXXXXX</td>
hope this one help you
Width attribute is deprecated one. So it is better to use css width property instead.
Usage Note: Do not use this attribute, as it has been deprecated and
the rules should be defined and styled using CSS. Use the CSS property
width instead. - MDN
td, th {
width: 200px;
}
width of td doesn't work at HTML5,
use CSS styles instead , for example in simplest way
<style type="text/css">
.tdw{
width:200px;
}
</style>
<td class="tdw">Diaconescu Cristian</td>
I have a treetable which columns have an icon and text like this (this is fine)*:
However, when I reduce the width of the screen, this happens:
And I would like to have something like this:
My html is like this:
<tr data-tt-id="2" data-tt-parent-id="1">
<td>
<i class="fa fa-lg fa-file-text-o"></i>
Title
</td>
</tr>
And my js is:
$("#requestForQuotationTable").treetable({
expandable: true,
indent: 15
});
And the code generated by treetable is this:
<tr data-tt-id="2" data-tt-parent-id="1">
<td>
<span class="indenter" style="padding-left: 15px;"></span>
<i class="fa fa-lg fa-file-text-o"></i>
Title
</td>
</tr>
I have tried setting pull-left in the icon as suggested in here, but then it ignores the span.indenter element, getting the icon to the left.
I have also tried this, with no good results either because of the span.indenter.
All what I have tried leads me to think that my problem is with the span.indenter, but I can't figure out a way to solve this.
Edit after Jayababu's response:
<td>
<span class="indenter" style="padding-left: 30px;float: left;"></span>
<span style="float:left">
<i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
</span>
<span style="float:left"><a href="javascript:void(0)" style="cursor: pointer;">
hgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
</span>
</td>
looks like this (it's still ignoring the indenter and the text is not looking good =():
*I have created these images from the example in http://ludo.cubicphuse.nl/jquery-treetable/#usage
In the page you have mentioned,the folder image is loading as a background image
for the span.
If you need a design like you have shown in the third screen shot.
Restructuring is the only one solution in your case.
Ideally you need to create 2 elements let it be 2 spans one to hold the image,another to hold the text.Align both the spans with float:left.
Please find the below code snipped,working fine as you need
As we cant display images in the code snippet,i have just colored the indenter and folder icon with red and green.
.folder{
float: left;
background: green;
width: 20px;
height: 20px;
display: inline;
}
.indenter> a{
background: red;
width: 19px;
}
.indenter{
padding-left: 30px;
float: left;
display: inline;
}
.content{
display: inline;
height: auto;
}
<table>
<tbody><tr class="branch ui-droppable expanded selected" data-tt-id="3-1" data-tt-parent-id="3" style="display: table-row;">
<td>
<span class="indenter" > </span>
<span class="folder" >
<i class="fa fa-lg fa-file-text-o" style="vertical-align: middle;"></i>
</span>
<span class="content" ><a href="javascript:void(0)" style="cursor: pointer;">
hgjkghjk ghjk ghjk ghjk hgjk hgjkghjkhgjkghjk ghjk ghjk ghjk hgjk hgjkghjk</a>
</span>
</td>
</tr>
</tbody></table>