I have the following :
HTML
<th class="sort">
<div>
<div class="sort"></div>Last Name
</div>
</th>
css:
table.tablesorter thead th.sort
{
padding:0;
}
table.tablesorter thead th div.sort
{
margin:0;
width:15px;
height:30px;
float:left;
background: url("/Content/images/admin/sort.png") no-repeat;
background-position: 0px center;
cursor:pointer;
}
table.tablesorter thead tr th.sort a
{
cursor:pointer;
color:inherit;
vertical-align:middle;
float: left;
padding-top: 7px;
}
I want to display inner and inside vertically aligned middle and always on ONE line so that when a browser window is resized (small) it will not break and will not more underneath inner (which is what is happening now).
thanks
use the "display inline" command...
<div style="display:inline;float left;">First name</div>
<div style="display:inline;float right;">Last name</div>
Its not clear to me what "inner" and "inside" youre referring to (you mught want to update and elaborate a bit, as well as post the complete markup for the table) but it sounds like you basically want everything in the th to be in one continuous line regardless of avialable space. You can turn off the text from wrapping with whitespace: nowrap;. However your content is going to overflow the th because thats how table cells work, so you need to set overflow: hidden on something that wraps the text. Unless yo need more than one elemment inside the cells you dont need the float.
The markup might look like this:
<thead>
<th><div class="clip sort">First Name</th>
<th><div class="clip sort">Last Name</th>
</thead>
Whith the css like so:
.clip {width: 100%; overflow: hidden; whitespace: nowrap;}
th {vertical-align: middle; height: 30px;}
Related
need help to make table responsive.
On this size everything is ok:
but when screen size is reduced im getting smth like this:
table is displayed on col-md-7:
<div class="row">
<div class="col-md-7">
<div class="ritekhela-fancy-title-two">
<h2>Turnyrinė lentelė</h2>
</div>
<div class="rs-point-table sec-spacer">
<div class="tab-content">
<table>
<tr>
<td>Vieta</td>
<td class="team-name">Komanda</td>
<td>Sužaista</td>
<td>Perg.</td>
<td>Lyg.</td>
<td>Laim.</td>
<td>Įm.</td>
<td>Pr.</td>
<td>+/-</td>
<td>Taškai</td>
</tr>
<tr>
<td>01</td>
<td class="team-name">Banani FC</td>
<td>60</td>
<td>35</td>
<td>08</td>
<td>16</td>
<td>02</td>
<td>04</td>
<td>11</td>
<td>95</td>
</tr>
</table>
</div>
</div>
</div>
EDITED:
If i trying to add max and min width, marked place is reducing too much:
I've had a look into your second example.
the troubling part is obviously your title bar, whose elements are inside the class ritekhela-fancy-title-two
And you have a wrapping div around this class, named row, this div needs to get set to adapt its width to the nested content.
Since fit-content is experimental and not available at all browsers, you'll need set width to auto and make it behave as an inline block
Then you must set the width of your ritekhela-fancy-title-two class to auto and remove the float:left, or set it to float:none and it will neither overflow on larger screens or not expand to the width of table on smaller screens.
that's it, check the fiddle with above changes implemented
these are the two css styles which were changed/added:
.row {
width: fit-content; /*works with Chrome, but not with FF*/
width: auto;
display: inline-block;
}
.ritekhela-fancy-title-two {
float: none;
width: auto;
padding: 12px 20px 12px 60px;
border-top: 7px solid;
background: url(/css/images/transparent-pattren.png);
position: relative;
margin-top: 30px;
background-color: #6c757d;
}
edit: as above changes also affect the lower title bars, which is easy to correct, adding some height to the second row:
.ec-nextmatch {
border: 1px solid #f3f3f3;
border-top: none;
background-color: #fff;
margin-bottom: 60px;
float:none;
height:90px;
width:auto;
}
also remove .ec-nextmatch from this css, so it looks now:
.ec-team-matches, .ec-match-countdown, .ec-match-countdown .countdown-row, .ec-ticket-button {
float: left;
width: 100%;
}
If you want to avoid the hassle of reducing font sizes, table cells widths, etc. I would recommend using the Bootstrap responsive table utility, basically makes the table scroll horizontally. Can be achieved like so...
...
<div class="tab-content table-responsive">
<table class="table">
...
</table>
</div>
...
I have a common header that consistently gets generated for all site web pages and which uses a div element to wrap a table element that contains one row with three cells.
The table and its cells are used to hold three images, one that shows up a the top-left of the page, one that shows up in the top-center of the page, and one that shows up in the top-right of the page.
The code currently looks like:
<div class="div_Header">
<table class="table_Header">
<tr>
<td class="td_Left"><img src="./IMAGES/Logo_Left.png" alt="Left Logo" /></td>
<td class="td_Center"><img src="./IMAGES/Center_Title.png" alt="Center Header" /></td>
<td class="td_Right"><img src="./IMAGES/Logo_Right.png" alt="Right Logo" /></td>
</tr>
</table>
</div>
In the above, CSS styles are used to do things like align the left image to the far left, the right image to the far right, and the center image to the center of the page.
My question is: Is this the best practice for achieving this or is there a better way? And, if there's a better way, how would that code look?
a 3 floated div solution in a wrapper is usually what would be used.
<div>
<div id="d1">left</div>
<div id="d2">right</div>
<div id="d3">center</div>
</div>
#d1 {
float: left;
border: 1px solid red;
}
#d2 {
float: right;
border: 1px solid blue;
}
#d3 {
margin-left: 100px;
margin-right: 100px;
border: 1px solid green;
}
see: http://jsbin.com/evagat/1/edit?html,css,output
set display:inline-block for all the div's
div {
display: inline-block;
width: 100%;
text-align: center;
}
div > div {
width: auto;
}
div > div:first-child {
float: left
}
div > div:last-child {
float: right
}
<div>
<div id="d1">content 1</div>
<div id="d2">content 2</div>
<div id="d3">content 3</div>
</div>
i believe what u want is to have a table with a bg for the row ,sadly this is not doable out-of-the-box ,instead u can do a couple of things
don't use the html table tags as they are not good for many reasons ,and browsers treats them differently (specially FF) ,so instead use the css declarations.
for each cell use the background-image: url('') along with its properties to have better control of how the image will look (specially if u r going with a responsive layout), if u dont want to give a class for each cell u can use the :nth-child(1,2,3,etc..) if u will stick with the html tags or :nth-of-type(1,2,3,etc..) if u will use a class for the 3 divs.
as a 2nd option u can use #briansol float trick but again floats are not meant for the web.
I have two float:left divs that are designed to stack left-to-right, one is the classic left nav and has a fixed width declared. The other is designed to span the rest of the width of the browser and fill 100% of the remaining width. Currently it does not have a width declared either natively or by any js/jQuery.
The problem comes where there is a table in the second div, which has about 10 columns of tabular results, some of them longer text. As soon as the cumulative text of the table cells pushes the table width to the size of the div it's in, the div pops under the left nav.
Is there any strategy to basically "tell the table" that it will not expand any wider than the parent div, but instead that text in the cells will wrap? I'm hoping to NOT have to use JS in any way for this.
<div id="container">
<div id="leftNav" style="width:250px;">
left<br>nav<br>here<br>
</div>
<div id="mainContent">
<table>
<tr><td>about</td><td>10</td><td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td></tr>
</table>
</div>
</div>
and the css:
#container{
width:100%;
}
#leftNav{
float:left;
width:250px;
border:1px solid #ccc;
padding:15px;
}
#mainContent{
float:left;
background-color:aliceblue;
}
/* nothing more*/
I would use display:table for this layout. The main benefit being that the columns will always line up regardless of their content width.
html,body { height: 100%; } enables percentage heights for the child elements of <body>
The container is given display: table
The two columns are given display: table-cell
The left column is given a fixed width and the right column is given no width
Possible drawback - display: table is compatible IE8+
Read more about the display values on the MDN.
CSS / HTML / Demo
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
}
#container {
width: 100%;
display: table;
height: 100%;
}
#leftNav {
display: table-cell;
vertical-align: top;
width: 250px;
border: 1px solid #ccc;
padding: 15px;
}
#mainContent {
display: table-cell;
vertical-align: top;
background-color: aliceblue;
}
/* nothing more*/
<div id="container">
<div id="leftNav">left
<br>nav
<br>here
<br>
</div>
<div id="mainContent">
<table>
<tr>
<td>about</td>
<td>10</td>
<td>Columns and they can contain sentences of text as well, but I'd like to not have the table push the div it's in down below the left nav div. This illustrates that point!</td>
</tr>
</table>
</div>
</div>
Display the two parent div elements as inline tables, the table will be treated as a child table and assume table like behavior of conforming. To have cell values completely conform to the width of the cell, you can use word-break: break-all; which will give characters inline like display and break when needed.
div {
display: inline-table;
word-break: break-all;
width: 40%;
}
<div>
<p>Hello World</p>
</div>
<div>
<table>
<tr>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
<td>Table</td>
</tr>
</table>
</div>
I have a html structure as shown below.
<style>
.divcontainer
{
width:100%
}
.left_menu {
background: none repeat scroll 0 0 #333333;
border-radius: 5px 5px 5px 5px;
font-family: Arial,Helvetica,sans-serif;
font-size: 12px;
font-weight: bold;
padding: 5px;
width: 200px;
}
</style>
<div class="divcontainer">
<table width="100%">
<tr>
<td valign="top">
<div class="left_menu">
1
</div>
</td>
<td>
<div>
2</div>
</td>
</tr>
</table>
</div>
I need to create a structure as in the picture below
but i dont want to apply styles to TD. The width of td should be adjusted through the classes applied to the child div. In short my first td should occupied 25% of tr and the second should occupy the remaining 75%.Can anyone throw some light on how to do this?
You may set for second td a hudge width. It will then take max-width avalaible and first td will shrink to its content.
http://jsfiddle.net/f5q3E/
basicly here you need to set :
td {
background:red;
}
td+td {
width:100%;
background:blue;
}
First td will adjust to its content and sized div if any , second td will use remaining space.
There are so many ways to handle this - here is one - FIDDLE - and it's not better than any other approach.
I'm just a little confused about the coloring of your tds and the coloring of the divs that goes into them.
If you can tell us the goals of what you want to do maybe we can make some other suggestions, such as not using table for layout - divs? floated divs?
CSS
table tr td:nth-child(1) {
width: 25%;
background-color: red;
}
table tr td:nth-child(2) {
width: 75%;
background-color: blue;
color: white;
}
I have a dynamically generated div.
I have to add a dynamically generated HTML table on it.
The problem is when I'm add the table, it display as left aligned.
But the div is center aligned for text contents.
Assuming you have your table as a fixed width element, you can set margin-left/right to auto to center a block element in it's container. (Fiddle here: http://jsfiddle.net/SWakJ/)
HTML
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
You may try to add some css to your outer div.
I actually wrote a similar answer here:
Position this div in the center of it's container?
Give your code or just go quick to your code and check this. Put a div above table and set text-align= center. or if your table is in any td then assign text-align:center.
Also you can put tag and put table between it.
If you want to just center the table column than also provide text-align:center
I dont know about your code but as per problem this could help you.
function makeTable() {
row=new Array();
cell=new Array();
row_num=12; //edit this value to suit
cell_num=12; //edit this value to suit
tab=document.createElement('table');
tab.setAttribute('id','newtable');
tbo=document.createElement('tbody');
for(c=0;c<row_num;c++){
row[c]=document.createElement('tr');
for(k=0;k<cell_num;k++) {
cell[k]=document.createElement('td');
cont=document.createTextNode((c+1)*(k+1))
cell[k].appendChild(cont);
row[c].appendChild(cell[k]);
}
tbo.appendChild(row[c]);
}
tab.appendChild(tbo);
document.getElementById('mytable').appendChild(tab);
}
the you can set allignment through CSS as below:
#newtable{
border:2px solid #999;
font-family:verdana,arial,helvetica,sans-serif;
font-size:18px;
margin:auto;
}
#newtable td{
width:50px;
line-height:50px;
border:1px solid #000;
text-align:center;
}
or see this link "http://www.webmasterworld.com/javascript/3614377.htm"
You can use like this
<div id="div1">
<table id="tab">
<tr>
<td>test</td>
</tr>
</table>
</div>
CSS
#div1
{
width:500px;
text-align:center;
}
#tab {
border:solid 1px black;
width: 200px;
height: 100px;
margin:2px auto;
}
#tab td
{
/* width: 200px;
text-align:center;*/
}
Running Demo Jsfiddle