I'm trying to space my HTML table headers using the width property and it's asif they are being ignored completely.
The 'Company Type' header is being split over two lines and so too is the Employment type? I do not have any table css in my css file. Which properties can I use to get each of the headers left-aligned and the next header along to start WIDTH pixels from the beginning of the previous header?
<thead style='float:left;'>
<tr>
<th style='width:270px;text-align:left;'>Company</th> <th style='width:150px;text-align:left;'>Company Type</th> <th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
<thead style='text-align:left;'>
<tr>
<th style='width:270px;'>Company</th>
<th style='width:150px;text-align:left;'>Company Type</th>
<th style='width:80px;text-align:left;'>Employment Type</th>
</tr>
</thead>
Try this and make sure that you have given width to all the header elements and total width does not exceed the table width.
I've never reliably got th and td width to work; not 100% sure they're meant to.
I usually just put a div inside the cell, and give that a width. Alternatively, add padding left and right to the th and td.
In a tableless way you could achieve that by this:
<div style="width:270px;float:left;">
Company
</div>
<div style="width:150px;float:left;">
Company Type
</div>
<div style="width:80px;float:left;">
Employment Type
</div>
Of course, you can style this up easily to your preference, and I'd keep the styles in a separate css file.
You could try 'nowrap' - but it isnt supported in HTML5
<th style='width:270px;text-align:left;'>Company</th>
<th style='width:150px;text-align:left;' nowrap>Company Type</th>
<th style='width:80px;text-align:left;' nowrap>Employment Type</th>
Related
I am using semantic ui as the front end framework, i have a table which has around 10 column in it, but the table width is just set to its container while i want it to go over the container and scrollable to right to see other columns.
Here is the code.
<table class="ui fixed single line celled table yellow very compact striped">
<thead>
<tr>
<th>Date</th>
<th>Type</th>
<th>Docno</th>
<th>Itemno</th>
<th>Item Part</th>
<th>Description</th>
<th>Uom</th>
<th>Location</th>
<th>Qty</th>
<th>Supplier</th>
<th>Dono</th>
<th>Prod Loc</th>
<th>Lotno</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="x in data">
<td>{{x.in_date}}</td>
<td>{{x.type}}</td>
<td>{{x.doc_no}}</td>
<td>{{x.item_no}}</td>
<td>{{x.matcode}}</td>
<td>{{x.descr}}</td>
<td>{{x.u_measure}}</td>
<td>{{x.location}}</td>
<td>{{x.in_qty}}</td>
<td>{{x.supp_no}}</td>
<td>{{x.do_no}}</td>
<td>{{x.org}}</td>
<td>{{x.lot_no}}</td>
</tr>
</tbody>
</table>
How to make the table is over its container and need to scroll to right to see other columns content.
First insert your table into a container. Then set a width on this container for example 400 and adjust the height to whatever. Most important is overflow-x:scroll to set a scrollbar on it.
<div id='container' style='height:500px;width:400px;overflow-x:scroll'>
<table></table>
</div>
I have a repeat control and for each row I want to set up a bootstrap responsive table. Right now it looks something like this:
the problem is that I would like to set the column widths so they line up better. I have tried to do a two row grid but the two rows collapse nicely but then the data is not under the Label. I have tried class="width:200px" or used % as well in the div but that seems to have no impact. Like wise if added to the of the .
I would settle for a grid or responsive table solution.
my code looks something like this:
<div class="table-responsive">
<table class="table table-bordered table-condensed " style="width:900px">
<thead>
<tr >
<th class="width:150px">Label</th>
<th class="width:250px">Default Approvers</th>
<th class="width:75px">Auto Process</th>
<th class="width:75px">Routing</th>
<th class="width:75px">Post Approval</th>
<th class="with:75px">Post Denial</th>
<th class="width:50px">Notify Late</th>
</tr>
</thead>
<tbody>
<tr>
<td>
.
.
.
</tbody>
First: you used class attributes to set style values. If you change to style then it should work.
I recommend you to use a colgroup though. http://www.w3schools.com/tags/tag_colgroup.asp
The two tables are inside one div (please see code below for an cut out of the code from bottom table), I would like to make the first column of the bottom div invisible....any ideas? thanks for replies
<table align="center" class="detailstable" style="width:100%">
<tr>
<th style="width:70%;"></th>
<th style="text-align:left;">Summary</th>
<th style="text-align:right;"></th>
</tr>
<tr>
<th style="width:70%;"></th>
<td style="text-align:left; width:100px;">Labour</td>
<th style="text-align:right; width:100px;"><%: this.FormatMoney(LabourTotal)%></th>
</tr>
</table>
if you want to make it look like its 'merged' with the cell that contains the total value, use CSS 'border-right-style' on the desired cell, for example:
<th style="width:70%; border-right-style:none;"></th>
Don't create the unwanted column, and instead position the second (now two column wide) table using the style. I would probably have removed the width from the second table and replaced it with float:right to make it align to the right...
I was just wondering if that by default a HTML <table> element implicitly applies the attribute scope="col" to the first group of <th> elements contained within the <thead> element?
When I render the first set of HTML below in a browser it seems to automatically detect that the <th> cells for Jan, Feb, March, April etc are headers for a column. So is it the case the scope="col" does not need adding to the markup as it will be automatically rendered this way?
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<th></th>
<th>Jan</th>
<th>Feb</th>
<th>March</th>
<th>April</th>
<th>May</th>
<th>June</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Firefox</th>
<td>37.1</td>
<td>36.6</td>
<td>36.3</td>
<td>35.8</td>
<td>35.2</td>
<td>34.4</td>
</tr>
</tr>
</tbody>
</table>
This second set of markup includes scope="col" added to the tags for Jan, feb, March April etc. Is it necessary? As the example above seems to render these <th> as columns anyway without scope"col".
I am aware that the scope attribute has no visual effect in ordinary web browsers, but can be used by screen readers. So should it be added for the purpose of better semantic markup and accessibility?
<table>
<caption>2009 Employee Sales by Department</caption>
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Jan</th>
<th scope="col">Feb</th>
<th scope="col">March</th>
<th scope="col">April</th>
<th scope="col">May</th>
<th scope="col">June</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">Firefox</th>
<td>37.1</td>
<td>36.6</td>
<td>36.3</td>
<td>35.8</td>
<td>35.2</td>
<td>34.4</td>
</tr>
</tr>
</tbody>
</table>
According to the HTML5 spec, the scope attribute defaults to auto:
The scope attribute's missing value default is the auto state.
This value is characterized by
The auto state makes the header cell apply to a set of cells selected based on context.
So I assume, that screenreaders will be able to detect the context properly, which in turn means, that you do not have to explicitly define the attribute, unless you have some special instances or usecases for rowgroup and colgroup values.
You can just specify the meaning of the table more with the scope attrribute. In normal tables, i wouldn't even use it, but if your table has a meaning on your page, and people want to take it over, it would be handy to use it, especially on a reader. However, if you just add tables to do minor stuff in it, leave it out. Personally this is something you should only look into if the table becomes really expanded.
The definition is as followed:
Definition and Usage
The scope attribute specifies whether a header cell is a header for a
column, row, or group of columns or rows.
this comes from the W3 website, btw.
i have a html table which looks like this:
<table>
<thead>
<tr>
<th >title1</th>
<th >title2</th>
<th >title3</th>
<th >title4</th>
<th >title5</th>
<th >title6</th>
<th >title7</th>
</tr>
</thead>
<tbody>
<tr>
<td>data1</td>
...
<td>data7</td>
</tr>
</tbody>
the issue I am having is that I only have around 300px to put all this information in, I was wondering if there was some way that I can tell the table to split if it reaches the end of 300px limit. is this even possible ? or shall i just go back to using divs ?
I'm not sure what 'splitting' is, but a good alternative would be to wrap the table in a container with overflow-x: auto set. That will make it scrollable.
Live Example