I'm a starter and I was trying some elements, as practice.
There's sth that i can't figure it out.I also have searched google but no answers found.
I wrote 2 tables, in the first one I used tbody to style the body of the table. But when I load the page, I see the style used in css for the tbody in the first table, has also effected the second table(without tbody tag) completely.Why is this happening?
Here is the code :
<table id="t1">
<caption>UFO Seen by People</caption>
<thead>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
</thead>
<tbody>
<tr>
<td rowspan="3">Jack</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</tbody>
<tfoot>
<tr>
<td colspan="4">Blah Blah Blah</td>
</tr>
</tfoot>
</table>
<table id="t2">
<caption>UFO Seen by People2</caption>
<colgroup>
<col span="2" style="text-align:right; background-color:yellow;">
<col style="background-color:cyan; background-image:url('baelen.jpg');">
</colgroup>
<tr>
<th>Name</th>
<th>City Name</th>
<th>Seen</th>
<th>Times seen</th>
</tr>
<tr>
<td rowspan="3">Dan</td>
<td>North Russia</td>
<td>2020-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Korea</td>
<td>2000-06-12</td>
<td>once</td>
</tr>
<tr>
<td>North Pole</td>
<td>1995-06-12</td>
<td>twice</td>
</tr>
</table>
And here is the css used :
#t1 { border:2px solid black; border-spacing:10pt; background-color:pink; width:100%;}
#t2 { border:2px solid rgb(20,20,20); border-collapse:collapse; width:100%;}
tbody { background-color:white; text-align:center; vertical-align:middle; font-size:20pt;}
That's really simple, that affect the second table cause you use tbody in css and not #t1 tbody, use correct selector if you want to affect only one element.
In addition I advise you not to use style on HTML and in CSS except in the case of manipulation in JavaScript. This will also allow you to better understand what does what, if you want to give a particular style to elements of your table assign their classes to your CSS.
Related
I want create a one <table> where multiple custom elements can have multiple <tr> components.
I tried using containerless, but element get rendered outside of <table>.
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<tbody>
<order-line repeat.for="line of lines" line.to-view="line" containerless></order-line>
</tbody>
</table>
And custom element looks like
<template>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</template>
How I can get a table row with details as another <tr> element within one aurelia CustomElement?
This is a limitation of the html spec. A <table> element cannot contain elements other than <tbody>, <tr>, etc.
You can use as-element to overcome this limitation:
<tr as-element="order-line" repeat.for="line of lines" line.to-view="line" containerless></tr>
This tells the template compiler that this <tr> is in fact an order-line custom element and to process it as such. At the same time, it "fools" the browser into thinking that this is just an ordinary <tr>
<table> can contain multiple <tbody> elements, this will allow to wrap multiple <tr> elements inside custom element with <tbody>.
/* custom element */
<template>
<tbody>
<tr>
<td>${line.position}</td>
<td>${line.name}</td>
</tr>
<tr if.to-view="detailsVisible">
<td colspan="2">${line.complicatedDescription}</td>
</tr>
</tbody>
</template>
Use as custom element inside
<table>
<thead>
<tr>
<th>Position</th>
<th>Name</th>
</tr>
</thead>
<order-line repeat.for="line of lines" line.to-view="line"></order-line>
</table>
I use datatable for displaying data and table has 14 columns
but i facing issue in display table header data.It overlapped rather then display in two lines
I create table like this
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th>Column Name</th>
</tr>
</thead>
</table>
How can i do it in two lines
<table id="tbl" class="table" cellspacing="0" width="100%" style="word-wrap:break-word;
table-layout: fixed;">
<thead>
<tr>
<th style="word-wrap: break-word;">Column Name</th>
</tr>
</thead>
</table>
overfow:hidden should do the trick ;-)
I have this table of input fields and was wondering how to add new "cells" to specific columns. Just like this:
Is there a way to do this by simply adding a new <tr>. Or do I have to do this by adding input fields with labels outside of a <table> element. If I go this route, is there Bootstrap/CSS stylings I could add to "attach" these fields to those table columns so they would resize with them?
If I understand you question correctly, you can just add a new row. Use the colspan attribute on the td to specific how many column the cell will span. In your case, your first cell that contains "TOTAL" will span across 6 cells, which will be like <td colspan="6">TOTAL</td>, and apply some some css styles to remove the border and align the text to the right.
table {
border-collapse: collapse;
}
th, td {
border: 1px solid black;
}
th, td {
min-width: 70px;
height: 20px;
}
td.total {
text-align: right;
padding-right: 5px;
}
.no-border {
border: none;
}
<table>
<tr>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
<th></th>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr class="total">
<td colspan="6" class="total no-border">TOTAL</td>
<td></td>
<td class="total no-border">TOTAL</td>
<td></td>
<td class="no-border"></td>
</tr>
</table>
<tfoot>
<tr>
<th colspan="6" style="text-align:right">Total:</th>
<th></th>
<th colspan="1" style="text-align:right">Total:</th>
<th colspan="2" style="text-align:right"></th>
</tr>
</tfoot>
then please see this code
https://datatables.net/examples/advanced_init/footer_callback.html
I have this simple html table
<table id="mytable">
<thead>
<tr>
<th>Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
<tbody>
<tr>
<td>MyName</td>
<td onclick="delete()">X</td>
<td onclick="update()">U</td>
</tr>
</tbody>
</table>
<script>
$(document).ready(function(){
$('#mytable').DataTable();
});
</script>
If i open this on the browser i get
"Cannot read property 'mData' of undefined".
I don't undestand where is the problem.. I am following the official example: https://datatables.net/examples/basic_init/complex_header.html
Thank you all!
your html have unmatched number of columns, notice the first row of your header has colspan while the second row doesn't.
what you can do is to provide a rowspan.
<thead>
<tr>
<th rowspan="2">Name</th>
<th colspan="2">Actions</th>
</tr>
<tr>
<th>Delete</th>
<th>Update</th>
</tr>
</thead>
here's a link to the datatables example of complex headers. https://datatables.net/examples/basic_init/complex_header.html
I am trying to right align the values, but those are not aligning properly to the end of the column.
Example code:
<table id="demoTable1" cellspacing="0" cellpadding="0" border="1">
<thead>
<tr>
<th style="text-align:right; width:23%"><bean:message key="label.amount"/></th>
</tr>
</thead>
<tbody >
<c:forEach items="${demoForm.amount}" var="amt" >
<tr>
<td dntitle="myAmt" style="text-align:right; width:23%">
<util:myCurrency name="amt" property="amtList" currProperty="curCode"/>
</td>
</tr>
</c:forEach>
</tbody>
</table>
And the Output looks like this:
How can I fix this?