Is there a 'correct' way of creating fixed width content in Semantic-UI?
I have a canvas element on the page which must remain a specific size, however when using their grid system it seems to always scale no matter what setup I try.
If I understand you correctly, I think that's not possible with Semantic UI grids. But using min-width and min-height might help you.
CSS
.fixed-width {
width: 300px;
height:300px;
min-width: 300px;
min-height:200px;
border:1px solid #000000;
}
Have a look at this jsfiddle snippet
Now Semantic UI supports a 16 column grid for table similar to ui grid. You can set length this way
<table class="ui table">
<thead>
<tr>
<th class="ten wide">Name</th>
<th class="six wide">Status</th>
</tr></thead>
<tbody>
<tr>
<td>John</td>
<td>Approved</td>
</tr>
<tr>
<td>Jamie</td>
<td>Approved</td>
</tr>
</tbody>
</table>
Related
Hi I'm having trouble adding inline styling to table components in React. Basically what I'm trying to do is so that the table header/cells are divided equally spacing so I'm adding width: '50%' styling to make this work. I added in the console and it works, but when I return to add it in my code, it doesn't.
I tried adding it to anything just to see if it work and it doesn't. Is there something I'm missing?
What it looks like:
What I want it to look like (after adding width styling to console):
JSX:
<table className="table table-striped">
<thead>
<tr styles={{width: '50%'}}>
<th styles={{width: '50%'}}>Hello</th>
<th styles={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody>
{(data.length == 0)&&
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
}
</tbody>
</table>
As mentioned in the comments
Change 'styles' to 'style' – cidicles
Usually plural styles is the convention people use when passing a variable to another component, while singular style is the keyword that jsx-html tags will receive to inline the css.
Other answers recommend adding styles to html tags directly in the css. While adding styles on html tags directly without using classes may work it is worth it to note that it may not scale well This will require more work on us to come back and maintain/update the original code.
You can use table-layout: fixed; width: 100% on the table to force equal column widths:
table {
width: 100%;
table-layout: fixed;
}
table tr th {
text-align: left;
background: gray;
color: white;
}
<table className="table table-striped">
<thead>
<tr style={{width: '50%'}}>
<th style={{width: '50%'}}>Hello</th>
<th style={{width: '50%'}}>World</th>
</tr>
</thead>
<tbody
<tr>
<td>I'm</td>
<td>Sam</td>
</tr>
</tbody>
</table>
Your width: 50% isn't working most likely because your parent .table doesn't have a width set. You can try adding width: 100% to the table and then your 50% might work.
EDIT
As other users have mentioned, change styles to style as well.
I'm writing an angular email app and have used bootstrap tables in my mail template.
The body of the message is large and I would like to limit this to be just a single line, something similar to how gmail does it. Right now, my cell auto sizes which increases the size of the overall row. I used a couple of angular filters to limit the characters but I don't think that's all that Gmail is doing. There is some sort of an overflow hidden applied to the table row and also the height of each row is consistent.
How do I tweak my table css so that the row does not auto size when the cell data is a lot?
My HTML Code : http://pastebin.com/13jd9EfqI'm using the latest version of bootstrap css.
I know you'd want overflow: hidden and white-space: nowrap styles. If you want you can also add the text-overlow: ellipsis style for a nice effect. You can use table-layout: fixed to ignore the size of the contents of the cells and only look at the heading sizes, otherwise automatic column sizing can take into account the full width of the string (fiddle):
table.special { table-layout: fixed }
table.special th { width: 20% }
table.special th.content { width: 40% }
table.special td {
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis
}
On your <tr> tags you should add style="width:[desired width]" so they don't resize, example:
<table class="table table-responsive table-striped table-hover">
<thead>
<tr>
<th style="width: 100px">MessageID</th>
<th style="width: 100px">Sender</th>
<th style="width: 100px">Content</th>
<th style="width: 100px">Date</th>
</tr>
</thead>
<tbody>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
<td>ID</td>
<td>Sender</td>
<td>Content</td>
<td>Date</td>
</tr>
<tr ng-click="changeRoute('mail',message)" ng-repeat="message in mails.messages | filter:search | orderBy:sortField:reverse">
<td>ID</td>
<td>Sender</td>
<td>Content</td>
<td>Date</td>
</tr>
</tbody>
</table>
You can change the text of the <td> tags and it won't resize. You might want to add a padding to the left on your <td> tags so they are more 'inline' with the <tr> tag's text. DEMO
Putting 2 one-row tables after each other I get the desired outcome: 2 adjacent rows that don't have the same column width. http://jsfiddle.net/x2SQN/
---------------------
|100px | 100% - 100px|
---------------------
| 50% | 50% |
---------------------
Can I achieve this also with a single <table>?
http://jsfiddle.net/x2SQN/
Basically I cannot use javascript or not in-line css.
No. Within a table the columns remain consistent from top to bottom.
You can play around with the colspans of each cell but that's about it.
e.g. if you wanted you could do this.
<table>
<tr>
<td width="20%">20%</td>
<td width="30%">30%</td>
<td width="50%">50%</td>
</tr>
<tr>
<td width="50%" colspan="2">50%</td>
<td width="50%">50%</td>
</tr>
</table>
But you will be limited to using a combination of fixed px sizes OR % sizes as you can't do 50% - 100px for example.
Usually, We transform block elements to the table model to achieve a 'Table like' display, and now, as a solution to your problem: I found myself doing just the opposite.
the main idea is to transform your table, to a block model design, where we can take control of the width of every element.
the main gain of my solution, is that you can use CSS function (like calc) to give responsive width to column [like calc(100% - 100px)].
but the main downsize of my solution is the scenario when you have different cells height in the same row.
luckily that can be easily fixed with faux columns techniques. (I used one-true-layout)
so, after all that been said, lets take a look at the solution: (some of it is written in the CSS section, with regular CSS selectors and not inline as you requested, because it was easier for me. but you can copy-past everything to the right place and make it all-inline)
Working Fiddle Tested on: Chrome, IE10, FF
HTML (I've add the <tbody> so you can apply the inline-CSS styling)
<table>
<tbody>
<tr>
<td style="background-color:red; width: 100px;">100px</td>
<td style="background-color:yellow; width: calc(100% - 100px);">100% - 100px<br/>another line to demonstrate <i>faux column</i></td>
</tr>
<tr>
<td style="background-color:azure; width:50%;">50%</td>
<td style="background-color:pink; width:50%;">50%</td>
</tr>
</tbody>
</table>
CSS (all of that styling can be placed inline)
*
{
margin: 0;
padding: 0;
}
table, tbody, tr
{
display: block;
}
tr
{
overflow: hidden; /*Faux column*/
}
td
{
float: left;
padding-bottom: 99999px; /*Faux column*/
margin-bottom: -99999px; /*Faux column*/
}
You can do this using fake colspan values. Treat them as percentages to keep it simple.
<table border="0" cellspacing="6" width="400">
<tr>
<td colspan="30" style="background-color:red;" />
<td colspan="70" style="background-color:yellow;"/>
</tr>
<tr>
<td colspan="70" style="background-color:black;" />
<td colspan="30" style="background-color:pink;" />
</tr>
</table>
In responsive table design to refer I got this link jsfiddle.net/n4rUG/27/
This gives me below output:
Now I want to align title to left and its value to right
means it need to look aligned properly
How to do this?
The text-align: right doesn't work for your tds because it's overridden by the Bootstrap style with higher specifity. The quickest solution is just to add !important. Also, I'd suggest to make the labels floating to left (see modified fiddle):
td {
...
text-align: right !important;
overflow: hidden; /* for containg floats */
}
td:before {
...
float:left;
}
Your JSFiddle is different then the image in your post.
Refering to your image, you could make it like this, using colspan to set your colums width:
<table>
<colgroup>
<col width="100px" />
<col width="200px" />
</colgroup>
<tr>
<td>title</td>
<td>value</td>
</tr>
<tr>
<td>title</td>
<td>value</td>
</tr>
...
</table>
As for your JSFiddle, you have 5 <th>'s and 6 <td>'s. Which is possible, however, one of the <th> should cover two <td>'s, you can make that by using this:
<th colspan="2">Title</th>
I'm trying to make 2 separate tables to echo results of drinkers and their drinks from a bar.
The tables have alternating backgrounds using nth-child(odd), nth-child(even) which is working fine.. its just getting them to align through different browsers and getting rounded corners.
I've tried using nth-last-child(1)..etc but still no tidy solution.
Here's where I'm at so far..
http://giblets-grave.co.uk/index3.php
and this is what its ment to look like:
http://giblets-grave.co.uk/img/1400x900_GG-desktop_design_final.jpg
Take a look at my current css at /css/main2.css
I've not seen your code, but I mocked up a similar scenario.
HTML
<div id="main">
<div id="first">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
<div id="second">
<table>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
<tr>
<td>A</td>
<td>B</td>
</tr>
</table>
</div>
</div>
As you can see, the height of the second table is "dynamic", and it could be longer than the first table, doesnt matter.
The CSS
#main {
width:500px;
overflow:hidden;
}
#first, #second {
padding-bottom: 1000px;
margin-bottom: -1000px;
float: left;
}
#first {
float:left;
width:100px;
overflow:auto;
}
#second {
width:400px;
float:left;
}
Thus far, what you have is the #first parent to follow the height of the #second. Reference
Fiddle
So what now? The #first follows the height of the #second, but the #first_child does not follow the height of #first. However, HTML tables does not follow parents div's heights. Reference
Answer: Javascripts.
You first want to detect the height of the #second, and then auto adjust the height of the #first_child to follow the height of the #second.
var second_height = $("#second").height();
var table_height = second_height;
$("#first_child").height(table_height);
Solution
Hope this is what you're looking for.