The text font is really weird compared to the default one. It's bigger than the light font should be.
I already tried to change Font weight etc.
<table>
<tr>
<th style="border-right: none; width: 130px;">
<div></div>
</th>
<th style="width: 40%;">
<div></div>
</th>
<th style="width: 25%;">
<div>Threads</div>
</th>
<th style="border-right: none; width: 25%;">
<div>Author</div>
</th>
</tr>
</table>
Current: http://prntscr.com/om9wwa
In the table cell: the font is bigger than the light one when you ignore that the one on the upper side is bigger.
both fonts are "fontLight" (font face)
Thanks for any help.
Try this
th tag has the default css font-weight: bold; To make th normal, you should add css font weight: normal;
check out the code snippet
th {
font-weight: normal;
}
<table>
<tr>
<th style="border-right: none; width: 130px;"><div></div></th>
<th style="width: 40%;"><div></div></th>
<th style="width: 25%;"><div>Threads</div></th>
<th style="border-right: none; width: 25%;"><div>Author</div>
</th>
</tr>
</table>
Related
I have a Table and in the <thead> I have a background image, I have a coubple of rows and <th> this is the structure of my markup:
(Im using bootstrap by the way)
<table className="table">
<thead>
<tr>
<th colSpan="12">
<h3 className="table-title">POST APOCALYPTIC HIGHWAY</h3>
</th>
</tr>
<tr className="attributes">
<th className="position"></th>
<th className="img d-none d-sm-table-cell"></th>
<th className="fullname"></th>
<th className="bib text-center">Bib</th>
<th className="age d-none d-sm-table-cell text-center">
Age
</th>
<th className="gender text-center">Gender</th>
<th className="time text-center">Time</th>
<th className="score text-center">Score</th>
</tr>
{/** Ghost row to simulate margin */}
<tr style={{ height: "10px" }}>
<th colSpan="12"></th>
</tr>
</thead>
Im applying a background image through CSS to the <thead> this way:
.leaderboard thead {
background-image: url(./images/black-square-pattern.jpeg);
background-repeat: repeat;
color: #fff;
}
I also make sure there's 0 padding and margin in the <th> elements
.leaderboard thead th {
padding: 0;
margin: 0;
border: none;
}
It looks okay in desktop but for some reason when I test it in Google chrome inspecter the different mobile previews I see some tiny white spaces between the cells, I cannot find why it's happening, any idea how to fix it? I also tested in Safari and the same happens.
It works perfectly in Chrome or FireFox, it's basic css coding but here :
<td
style="
text-align: right;
border-color: black;
border-width: 1px;
border-style: solid;
max-width: 60px;
width:60px;
"
>
#Model.Item1
</td>
I've put max-width AND width just to be sure...
Seem like IE has some reasons to ignore them and puts the default width... which is about 200px. FAR from being 60px...
Any idea ?
Entire table :
<table style="border-color: black; border-width: 1px; border-style: solid; table-layout:fixed; ">
<tr >
<th rowspan="2" style="">
Service de garde
</th>
<th colspan="2" style="" >
Paie
</th>
<th colspan="2" style="">
Avant Garde
</th>
<th colspan="2" style=" width:180px;">
Ratio
</th>
</tr>
<tr >
<th style="text-align: center ; border-color: black; border-width: 1px; border-style: solid ">
Dépenses
Salaires
</th>
<th style=" ">
Heures
travaillées
</th>
<th style="">
Heures
présences
</th>
<th style="">
Frais facturés
</th>
<th style="max-width: 120px; width:120px; ">
Avec
Responsable
</th>
<th style="max-width: 60px; width:60px;" >
Sans
Responsable
</th>
</tr>
<tr>
<td> Tous les services de garde</td>
<td style=""> #Model.depensesSalaires </td>
<td style=""> #Model.hTravaille </td>
<td style=""> #Model.hPresence </td>
<td style=""> #Model.fraisFacture </td>
<td style="max-width: 120px; width:120px;" > #Model.avecResp </td>
<td style="max-width: 60px; width:60px;"> #Model.sansResp </td>
</tr>
</table>
I found the problem today. In the content folder, there is a file named Site.css.
In this file, there were :
td,th
{
min-width: 200px;
}
I removed it and now it works.
When using IE11, this file's css takes priority over the inline style.
I don't know why though. Personally i think inline style should always take priority over anything else.
I have a simple table of airport data:
<table cellspacing="0">
<thead>
<tr>
<th>Type</th>
<th>Flight number</th>
<th>Company</th>
<th>Plane</th>
<th>Airport</th>
<th>Time</th>
<th>Status</th>
</tr>
</thead>
<tbody>
<tr>
<td>Take off</td>
<td>UN 35</td>
<td>UtAir</td>
<td>SuperJet 100</td>
<td>Lisboa</td>
<td>20:54</td>
<td>Delayed</td>
</tr>
<tr>
<td>Take off</td>
<td>UN 45</td>
<td>UtAir</td>
<td>SuperJet 100</td>
<td>Paris</td>
<td>19:40</td>
<td>Cancelled</td>
</tr>
<tr>
<td>Take off</td>
<td>UN 5</td>
<td>UtAir</td>
<td>SuperJet 100</td>
<td>London</td>
<td>21:10</td>
<td>Boarding</td>
</tr>
The number of rows is dynamic, and one instance of the table has a lot of rows, requiring the user to scroll down the page. Is there a way to fix the thead part of the table to the top of the screen using css only? Perhaps a solution similar to this one: using two blocks to look like it's sticky, but for thead?
I know you want only CSS, but honestly the easiest way about this I would say would just to implement a little jQuery and use something like floatThead
It allows you to do it either way(scrolling table or window) and just needs a little bit of JS on the page.
$('table').floatThead({
scrollingTop: pageTop,
useAbsolutePositioning: true //the default value
});
Another good example that I really like is found on CodePen
Css styles:
.tablesorter th {
color: transparent;
height: 0 !important;
line-height: 0;
}
.tablesorter th div {
color: black;
background-color: #d5e9fd;
font-size: 9pt;
line-height: normal;
position: absolute !important;
top: 0;
margin-left: 5px !important;
}
.tblprogressbar {
color: darkblue;
text-align: center;
text-decoration-color:red;
height: 10px;
width: 0;
background-color: green;
border-radius: 1px;
}
html#:
<div style="border-color:black; width: 100%; padding-top: 20px; position: relative;" class="ui-jqgrid-bdiv bgD5E9FD">
<div style="height: 150px; overflow-y:auto;">
<table id="ConnSortTable" class="ui-jqgrid-htable ui-common-table mt tablesorter" border="1" cellpadding="0" cellspacing="0" style="width: 100%;">
<thead class="bgD5E9FD fcBlack f_9">
<tr>
<th style="display: none;">
<span><b>ID</b></span>
</th>
<th>
<div><b>Carrier</b></div>
</th>
<th>
<div><b>Flight</b></div>
</th>
<th>
<div ><b>Origin</b></div>
</th>
<th>
<div><b>Gate</b></div>
</th>
<th>
<div ><b>ETA</b></div>
</th>
<th>
<div><b>Status</b></div>
</th>
<th>
<div><b>Pax</b></div>
</th>
</tr>
</thead>
<tbody id="tBodyConnection" class="bg336699 fcWhite f_9"></tbody>
</table>
</div>
</div>
I'd like to make to following table adapt its width to the cells, instead of its container:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The width of the container is narrower than the sum of the cell width. It is okay to show horizontal scroll bar here, but the table just can't be wider than its container. If I calculate the sum width for the colspan and the table, it can do the job, but what if the cells has non-px width, like "%" or "em"? Then static px calculation can't work.
Current effect is:
The expected effect would be the table's width exceeding the container div's width.
But setting width directly to the table also has problems: the width set for cells will be ignored. For example:
<div style='width: 700px; border: 1px solid red;'>
<table border="1" style='table-layout: fixed; width: 900px;'><tbody>
<tr>
<th style="" colspan="3">Group 1</th>
<th style="" colspan="5">Group 2</th>
<th style="" colspan="4">Group 3</th>
</tr>
<tr>
<th style="width: 62px;">A</th>
<th style="width: 200px;">B</th>
<th style="width: 62px;">C</th>
<th style="width: 62px;">D</th>
<th style="width: 62px;">E</th>
<th style="width: 62px;">F</th>
<th style="width: 62px;">G</th>
<th style="width: 62px;">H</th>
<th style="width: 62px;">I</th>
<th style="width: 100px;">J</th>
<th style="width: 62px;">K</th>
<th style="width: 68px;">L</th>
</tr>
</tbody></table>
</div>
The effect is:
Note the 2nd cell (should be 200px) is as narrow as the 1st and 3rd one.
Anybody could shed some light on this issue? Thanks in advance.
add css:
th{
min-width:50px; /*for instance*/
}
div{
overflow-x:scroll;
}
and remove style='table-layout: fixed; width: 1px;' from the table
Would positioning the table absolutely be acceptible?
<table border="1" style="position:absolute;">
This works such that the div no longer contains the table horizontally. But, of course, the div also no longer contains the table vertically. You could work around this by giving the div height manually, though.
Merijn's answer works, tweaked slightly, for the fixed-width cells case:
Instead of specifying a global th min-width, specify it per cell like so:
<th style="min-width: 62px; width: 62px;">A</th>
<th style="min-width: 200px; width: 200px;">B</th>
<th style="min-width: 62px; width: 62px;">C</th>
At least this way, your individual width's are not ignored, giving you a table wider than the container, and with irregular width cells.
I'm really bad with html/css, so I'm just wondering if I can get your help.
Here's a fiddle of this table fiddle. You can see that each of the td rows are the same width. However, I want, for example, to have the column on the left 200 px, and the column on the right 50 px.
What's the most efficient way to achieve that if I'm going to have a lot of rows?
<table id="theList">
<thead>
<tr>
<th >Item</th>
<th >Price</th>
</tr>
</thead>
<tbody>
<tr>
<td>Milk</td>
<td>1.99</td>
</tr>
<tr>
<td>Eggs</td>
<td>2.29</td>
</tr>
</tbody>
</table>
CSS
th,td {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 18px;
color: #000000;
}
tr {
border: 1px solid gray;
}
td {
width:200px;
padding:3px;
}
th {
background-color:#D2E0E8;
color:#003366
}
table {
border: 1pt solid gray;
}
Keep in mind that you don't need to set the style on every <td>, just on the <th>. All of the above answers would work, but I would prefer to set a class on the <th> and apply the width styles that way.
<table id="theList">
<thead>
<tr>
<th class='header-250' >Item</th>
<th class='header-50' >Price</th>
</tr>
....
</table>
And CSS:
.header-250 {
width: 250px;
color: red; //example
}
.header-50 {
width: 50px;
}
Just my style. I'm not a fan of inline styles, just for the simple fact you MAY want to style the headers differently. If you don't need that, inline would work fine.
You can do this by writing an inline style into your HTML markup.
<table id="theList">
<thead>
<tr>
<th style="width: 200px;">Item</th>
<th style="width: 50px;">Price</th>
</tr>
</thead>
<tbody>
<tr>
<td style="width: 200px;">Milk</td>
<td style="width: 50px;">1.99</td>
...
You can use the COL element.
<table id="theList">
<col class="column1" style="width: 200px;">
<col class="column2" style="width: 50px;">
.
.
.
</table>
Demo 1 uses inline styles
Demo 2 uses css
Personally, I'd specify width on all columns of first row using inline styles (all but one column if table itself has a width).