We Keep Coding

Can I enhance complex table accessibility with JavaScript?

A website has a great number of complex informational tables with multi-level headers, a simple version of which is:
table { border: 1px solid black; border-collapse:collapse; width: 100%; }
td, th { border: 1px solid black; }
th { background-color: lightgray; }
<!-- simplified table -->
<table>
<thead>
<tr><th></th><th>Col 1</th><th>Col 2</th></tr>
</thead>
<tbody>
<tr><th>Row 1</th><td>Foo</td><td>Bar</td></tr>
<tr><th colspan="3">Header for subregion</th></tr>
<tr><th>Row 2</th><td>Foo</td><td>Bar</td></tr>
<tr><th>Row 3</th><td>Foo</td><td>Bar</td></tr>
</tbody>
</table>
For various reasons, server-side and hand-coded solutions are out. If I use JavaScript that applies the suggested WAI fixes ("use id and headers attributes to associate header and data cells explicitly") to enhance the HTML, will this be reliably reflected in what users actually get in a screen reader?
Using ARIA Live Regions seems like it would needlessly update them to a host of changes. So, ideally, can it work without that?

The short answer is "yes". In general(*), any attributes you apply via javascript, whether ARIA attributes or any other html attributes, will be available to screen readers.
(*) There is (at least) one exception that I'm aware of, aria-live. There are browser and screen reader combinations where that attribute has to exist on the element when the page is loaded in order for it to be honored. You mentioned aria-live in your question but that attribute doesn't really come into play unless you are making updates to your page dyanamically (for example, if you table headers changed based on some user action).
I was going to show some sample code to show the desired results based on your code snippet, but your example is a little confusing. You have a "Header for subregion" that spans all the columns. Visually, it looks more like a caption/summary for the table than it does a column header. Can you clarify? Table captions should not be coded as headers (<th>).
Do you want "Header for subregion" to be read as the column header for every cell?

HTML How to fit some cells to content others to rest of available space in row?

I have a table that I wish to have the following attributes:
The table has a set width imposed by a parent element, 500px for the sake of argument.
No line-breaking in cells, only one line per cell.
Some cells should align their width with the width of their content.
The rest should consume the rest of the available space in the row.
I have managed to achieve this without criteria #2 (no line-breaking). When I try to apply no line-breaking the table just becomes insanely wide overflowing the parent container.
Here is my fiddle https://jsfiddle.net/marpal/705p9pqj/.
<div>
<table>
<tr>
<td class="small">OS</td>
<td class="small">User</td>
<td class="large">Long Text 1</td>
<td class="small">Date</td>
<td class="large">Long Text 2</td>
</tr>
<tr>
<td class="small">Ubuntu</td>
<td class="small">Admin</td>
<td class="large">This is a test text that should stretch until it is finally truncated, at least I think that that is the correct use of the word truncated. Not to mention the spelling, how the hell do you spell truncated? It feels right though.</td>
<td class="small">2016-02-14</td>
<td>This is the next long text that should be truncated into one line and the overflow hidden from the world.</td>
</tr>
</table>
</div>
div {
width: 500px;
}
table {
width: 100%;
}
td {
border: 1px solid grey;
overflow: hidden;
}
td.small {
width: 1%;
}
td.large{
//white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
Is it possible to achieve the last criteria (no line-breaking), while keeping the size limit imposed by the parent DIVs width, purely through CSS or will I need to calculate widths dynamically with JavaScript? I would like to avoid this since I think it's ugly and not always super dependable, especially since this table will be updated dynamically during run-time.
Also, how can I get the date to fill a whole cell without line breaks?

I want to split a long HTML table row into multiple rows according to the page width

I am using AngularJS to generate a row of Material buttons in an HTML table. The selected button is highlighted.
<tr>
<td ng-click="pbmain.selectWC(WC.WCName)" ng-repeat="WC in pbmain.WCList">
md-button(ng-class="WC.WCName == pbmain.selectedWCName ? 'md-raised md-primary' : 'md-raised'") {{WC.WCName}}
</td>
</tr>
The number of buttons and text on the buttons can be quite long and the row is often 2-3 times the width of the browser window. For the moment, I scroll across but I am looking for a more user-friendly solution.
I would like to be able to split the row automatically, according to the page width - something like the example below.

You can achieve this by applying proper CSS to table and button elements. No need to split a row into multiple rows.
Example:
<table border="0" cellspacing="0" cellpadding="0">
<tr>
<td>
<span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span><span>TEST</span>
</td>
</tr>
CSS
table {
table-layout: fixed;
width: 100%
}
span {
border: 1px solid black;
margin: 10px;
width: 100px;
display: inline-block;
}
Have a look at this fiddle.

Well, I was searching by splitting rows into multiple rows and I got here.
It seems that your problem could be better solver by using display: inline-block; for every button.
However, if you really need a table for other purpose check at this next approach.
It would redrawn your linear tabular long table into a multilined table by only using css.
Than you can play around with your screen size.

I have no idea how to accomplish this easily within a table. Maybe you could make some pre-work on your array to make it two-dimensional and then ng-repeat tr and td tags as well.
My solution would be a clean grid system with Bootstrap.
With this you can achieve a fully responsive screen. If you do not need to stick with a table system, then you should consider this.

Alternate to table to display data?

I am trying to display a table in HTML but it seems the table is unable to meet the specs. I would like to data to be in the same place on the screen otherwise it will cause all kinds of problems with the users as they mis-read the data. So I need fixed width columns. I also would like the column headers to remian fixed if the data exceeds the height of the windows because some users do use them.
I do not want to install any 3rd party controls if possible. The owner will not buy anything anyway. I don't mind something that downloads with the page.
I was thinking of trying to make a scrollable div with textboxes or labels but thought I should check to see if someone has already run into this issue and came up with a solution.
I asked here: How to make a scrolling table with dynamic data
but no one has a clue as to whats wrong.
Then I asked here: How to get a table to fit its parent container?
And the key here seems the column widths. But without the widths using the table seems pointless.
Asking this: Why don't my column headings line up?
Seems also to indicate that a table will never work.
Setting this:
display: table-row-group
Makes the column headings line up, but then the table can not scroll.
display: block
Makes the table scroll but the column headings are wrong.
Here's an example that works on its own. http://jsfiddle.net/kjzcv9g2/
<style type="text/css" media="screen">
table, th, td {border: solid;}
thead {
display: block;
color: #f00;
background: #eee;
height: 35px;
overflow-y: scroll;
}
tbody {
display: block;
height: 100px;
overflow-y: scroll;
}
th, td {
width: 10em;
font-weight: normal;
}
</style>
<table>
<thead>
<tr>
<th>foo</th>
<th>bar</th>
</tr>
</thead>
<tbody>
<tr>
<td>foo</td>
<td>bar</td>
</tr>
</tbody>
</table>
But getting this to work seems impossible.
Any suggestions on whether to use labels or textboxes to create my own table?

JSFIDDLE
If I understand the question correctly the above should work. Add a min-width to the overall table and you'll have fixed width columns below the min width, and the columns will fill the container about the min width.

html css tr set width

I have the HTML table & its CSS.
CSS :
#outerDIV {
position: relative;
padding-top: 20px;
}
#innerDIV {
overflow-y: auto;
height: 500px;
}
table#mytable tbody tr:first-child
{
width:100%;
position :absolute;
}
HTML :
<div class="outerDIV">
<div class="innerDIV">
<table id="#mytable"></table>
</div>
</div>
I need the fixed header tags of table, so is the above code does, but the width of the th tags gets compressed to the left & does not matches the width of the tr's of the body. How to make the tr to 100% width ?

NEVER try to use absolute or even relative re-positioning on <tr>, <td> and <th>. It's not supposed to work in tables, and in most cases the results will be nowhere near what you'd expect.

You want the <th> to span the width of multiple columns, but you can't do this with CSS so you need to do it in the HTML (see HTML colspan in CSS).
If you add a colspan attribute to the <th> it should do what you want (see Colspan all columns). If you know the number of columns in the table, use that, e.g. for 5 columns use <th colspan="5">, but you can also use a larger number and it should be ok, e.g. <th colspan="100">.
Some other notes: as others have mentioned, you shouldn't use position on a <tr>. Also, don't include the # in an element id, i.e. it should be
<table id="mytable"></table>