Is it possible to add different table header in a Colspan - html

I am trying to add text above every column in Colspan but nothing works as expected.
https://i.stack.imgur.com/MxQPj.png as shown here in the image I want in columns of colspan to be
1 2 3 4 5 O, but I don't know how to make that.
Here is example of my code
<thead>
<tr>
<th width="30%">
#DbResHtml.T("Натпреварувач", "Resources")
</th>
<th width="1%">
#DbResHtml.T("Бр.", "Resources")
</th>
<th width="1%">#DbResHtml.T("ВИ", "Resources")</th>
<th width="1%">
#DbResHtml.T("П.", "Resources")
</th>
<th colspan="6" scope="colgroup">
#DbResHtml.T("Грешки", "Resources")<br>
#DbResHtml.T("12345O", "Resources")
</th>
</tr>
</thead>
Tbody code is not included for clarity.

I'm not sure if I'm following your question correctly, but if you want text above each column a colspan will prevent that from working correctly. You would need to split them into their own elements.
<thead>
<tr>
<th width="30%">
#DbResHtml.T("Натпреварувач", "Resources")
</th>
<th width="1%">
#DbResHtml.T("Бр.", "Resources")
</th>
<th width="1%">#DbResHtml.T("ВИ", "Resources")</th>
<th width="1%">
#DbResHtml.T("П.", "Resources")
</th>
<th>#DbResHtml.T("Г", "Resources") <br>
#DbResHtml.T("1", "Resources")
</th>
<th>#DbResHtml.T("р", "Resources")<br>
#DbResHtml.T("2", "Resources")</th>
<th>#DbResHtml.T("е", "Resources")<br>
#DbResHtml.T("3", "Resources")</th>
<th>#DbResHtml.T("ш", "Resources")<br>
#DbResHtml.T("4", "Resources")</th>
<th>#DbResHtml.T("к", "Resources")<br>
#DbResHtml.T("5", "Resources")</th>
<th>#DbResHtml.T("и", "Resources")<br>
#DbResHtml.T("O", "Resources")</th>
</tr>
</thead>
As it appears you are pulling from a Db so you could split the strings into arrays and perform a loop to generate each for each character in the array.
Hope this helps.

Related

How to make some columns editable but some not in bootstrap table?

I have a web app, front end has a bootstrap table, whose data rendered from Django rest framework.
As the data is rendered using data-field, it only has table header, does not have table column.
I want to make some some column editable but some not, but but failed to do so. The contenteditable='true'/'false' flag does not function on a column level.
How could I make some column editable but some not?
<table contenteditable='true' class="table table-bordered table-sm" width="100%" cellspacing="0" style="font-size: 1.0rem;"
id="bk-table"
data-toggle="table"
data-toolbar="#toolbar"
data-cookie="true"
data-cookie-id-table="materialId"
data-show-columns="true"
data-show-refresh="true"
data-show-fullscreen="true"
data-height="650"
data-click-to-select="true"
data-id-field="id"
data-show-footer="true"
data-url="/api/materials/"
data-query-params="queryParams"
data-remember-order="true"
data-pagination="true"
data-side-pagination="client"
data-total-field="count"
data-data-field="results">
<thead class="thead-dark" >
<tr contenteditable='true'>
<th data-field="state" data-checkbox="true"></th>
<th data-field="type">Course Type</th>
</tr>
</thead>
</table>
use bootstrap table plugin "x-editable" to make a column editable or non-editable use
data-editable="true" data-editable="false" respectively on <tr>
for example
<table id="my_table_id"
<thead>
<tr>
<th class="col-md-1">#</th>
<th class="col-md-4" data-editable="true">Name</th>
<th class="col-md-7" data-editable="false">Description</th>
</tr>
</thead>
</table>

Accessibility: How to configure "column header" announcement?

I'm working on optimizing a website for visually impaired. I have a table on the page in the following format -
<table>
<thead>
<tr>
<th>Number</th>
<th>Name</th>
<th>Surname</th>
</tr>
</thead>
<tbody>
...
</tbody>
</table>
Currently the screen reader is announcing "row 1 col 1 number" but the expectation is that it should announce "row 1 col 1 number column header" when its a element. How can I configure it? Setting role="columnheader" is not working.
It is scope you are looking for to associate columns and rows.
scope="col" will associate a table header as a column header.
You can also associate a row header if you wish with scope="row"
<table>
<caption>My table caption - don't forget this so people know what a table is for / about</caption>
<thead>
<tr>
<th scope="col">Number</th>
<th scope="col">Name</th>
<th scope="col">Surname</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="row">1</td>
<td>John</td>
<td>Smith</td>
</tr>
<tr>
<td scope="row">2</td>
<td>Mike</td>
<td>Simmons</td>
</tr>
</tbody>
</table>
See https://www.w3.org/TR/WCAG20-TECHS/H63.html for more info on this technique.
p.s. don't forget to add a <caption> to your table!

Create Angular2 Table Header with *ngFor loop

So, my problem is so basic but i cant solve it.
I'm trying to create dynamic table header with *ngFor.
<table>
<tr>
<th>Entry Warehouse</th>
<th colspan="2" *ngFor="let data of datas">
SomeText
</th>
</tr>
<tr>
<th>More Text</th>
<div *ngFor="let data of datas">
<th>A little text again</th>
<th>A little text again</th>
</div>
</tr>
</table>
Anyway, this solution suicide themself at that point. If datas length more than 1, div tag is underscoring th tag in same cell.
If i try another solution like this;
<table>
<tr>
<th>Entry Warehouse</th>
<th colspan="2" *ngFor="let data of datas">
SomeText
</th>
</tr>
<tr>
<th>More Text</th>
<th *ngFor="let data of datas">A little text again</th>
<th *ngFor="let data of datas">A little text again</th>
</tr>
</table>
it looks like works but actually not. Because at this time the next th tag doesnt start before the previous loop ends.
In angular 2+ you can use<ng-container> tags
<ng-conatiner *ngFor="let i of items">
<th>i</th>
</ng-conatiner>

jquery mobile table custom

I am creating a table and I would like to show and hide individual columns. What I could not achieve is that all columns appear and the user can show or hide the like.
<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b" data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
<thead>
<tr class="ui-bar-d">
<th class="header_table cliente_table">Cliente</th>
<th class="header_table real_table">Real (%)</th>
<th class="header_table proy_table">Proy (%)</th>
<th class="header_table falta_table">Falta (M$)</th>
<th class="header_table cod_table" data-priority="5">Código</th>
<th class="header_table dato_table" data-priority="6">Dirección</th>
</tr>
</thead>
</table>
Of these 6 columns I would like to appear for the first time the first 4, the last two always hidden. But by pressing the button to show / hide, appear also the first 4 to give the user the option that is not what I could get.
Only columns with a data priority are included in the toggle list, so add a data-priority of 1 to the first four columns:
<table border="0" id="proforma" data-role="table" data-mode="columntoggle" class="ui-body-d ui-shadow table-stripe ui-responsive" data-column-button-theme="b" data-column-btn-theme="b" data-column-btn-text="Ver más" data-column-popup-theme="b">
<thead>
<tr class="ui-bar-d">
<th class="header_table cliente_table" data-priority="1">Cliente</th>
<th class="header_table real_table" data-priority="1">Real (%)</th>
<th class="header_table proy_table" data-priority="1">Proy (%)</th>
<th class="header_table falta_table" data-priority="1">Falta (M$)</th>
<th class="header_table cod_table" data-priority="5">Código</th>
<th class="header_table dato_table" data-priority="6">Dirección</th>
</tr>
</thead>
</table>

How do I get the links in a table based on caption using nokogiri

How do I get all the links in a table based on the table caption?
<table class="wikitable sortable plainrowheaders">
<caption>Film</caption>
<tr>
<th scope="col">Year</th>
<th scope="col">Title</th>
<th scope="col">Role</th>
<th scope="col" class="unsortable">Notes</th>
</tr>
<tr>
<td style="text-align:center;">1997</td>
<th scope="row"><i><span class="sortkey">Ice Storm, The</span><span class="vcard"><span class="fn">The Ice Storm</span> </span></i></th>
<td>Libbets Casey</td>
<td>First professional role</td>
</tr>
</table>
I tried this
doc = Nokogiri::HTML(str)
doc.xpath('//table[caption=''Film'']//a/#href').each do |href|
p href
end
But this doesn't print anything.
You can write your code as below :-
require 'nokogiri'
doc = Nokogiri::HTML::Document.parse <<-EOT
<table class="wikitable sortable plainrowheaders">
<caption>Film</caption>
<tr>
<th scope="col">Year</th>
<th scope="col">Title</th>
<th scope="col">Role</th>
<th scope="col" class="unsortable">Notes</th>
</tr>
<tr>
<td style="text-align:center;">1997</td>
<th scope="row"><i><span class="sortkey">Ice Storm, The</span><span class="vcard"><span class="fn">The Ice Storm</span> </span></i></th>
<td>Libbets Casey</td>
<td>First professional role</td>
</tr>
</table>
EOT
doc.xpath("//table[./caption[text()='Film']]//a").each do |node|
p node['href']
end
# >> "/wiki/The_Ice_Storm_(film)"