I have a simple table in my Codeigniter site like below
<table class="table">
<thead>
<tr>
<th>Time</th>
<th>Image</th>
<th>Username</th>
<th>Comment</th>
<th>Action</th>
</tr>
</thead>
<tbody id="ajax_table">
</tbody>
</table>
and I am displaying row like below
public function getComment(){
$page = $_GET['page'];
$user_id =$_GET['user_id'];
// $data['comments'] = $this->member->get_all_comment($user_id);
$comments = $this->member->get_all_comment($page,$user_id);
$html='';
if(isset($comments) && count($comments)>0){
foreach($comments as $comment){
if($comment->image ==""){
$image = "https://granboardonline.com/uploads/empty.jpg";
}
else {
$image = "https://granboardonline.com/uploads/".$comment->image;
}
$html.= "<tr><td>".$comment->date_created."</td><td> <img src= $image style='width:50px;height:50px;'> </td><td>".$comment->fname."</td><td>".$comment->comment."</td>";
if($this->session->userdata('user_id')==$comment->reciver_id || $this->session->userdata('user_id')==$comment->sender_id){
$html.="<td><button class='btn btn-light btn-sm deletecomment' comment_id='".$comment->comment_id."'>Delete</button></td></tr>";
}
}
}
echo $html;
exit;
}
But my comment column's row going outside and looking very bad, How I can show it fit the column?
Thanks!
You can refer https://www.w3schools.com/bootstrap4/bootstrap_tables.asp and
https://getbootstrap.com/docs/4.0/content/tables/ for more information.
<div class="table-responsive">
<table class="table">
...
</table>
</div>
It's always a good practice to set the width of the columns to give more look and feel to the design and avoid taking auto width as per the content.
If you are not using bootstrap table utility classes then remember that your table should have the width 100% and there should be an overflow if the page is opened in the smaller devices to avoid inconsistency in the width of the page.
You can do that by enclosing it inside a div
<div style="overflow:auto">
<table class="table" style="width:100%;">
...
</table>
</div>
I hope that helps you.
use word-break style for td tag
e.g
<td style="word-break: break-word;">aaaaaaaaaaaaaaaaaaaaaaaa</td>
I have tried finding a solution to my problem for few days already - somehow I just don't manage to find a working solution.
Unfortunately I cannot give the URL for the webpage that I have as it would require a login and password - which I cannot share.
I have the VBA code already doing me everything, login into the webpage - proving the proper information inside the page and clicking validate button. But the problem is that I should then see if the below text appears:
ENQUADRAMENTO EM VIGOR - if yes, I will continue slightly differently the process and if not then differently.
Now below is the code from the webpage:
<tr>
<td>
<table cellpadding="4" border="0" width="100%">
<tbody><tr>
<td class="fieldTitleBold" style="width=30%">Enquadramento em IVA</td>
<td class="fieldValue" colspan="3">NORMAL TRIMESTRAL</td>
</tr>
<tr>
<td style="width=10%" class="fieldTitleBold">Situação</td>
<td class="fieldValue" colspan="3">ENQUADRAMENTO EM VIGOR</td>
</tr>
</tbody></table>
</td>
</tr>
I have tried many different ways and the latest I tried is with byclassname (this worked for me in a different website for similar purpose) but doesn't work here for some reason:
Set doc = ie.document
Set htmTable = doc.getElementsByClassName("ENQUADRAMENTO EM VIGOR")(0)
If Not htmTable Is Nothing Then
'continue depending if the text was found or not in different ways
ENQUADRAMENTO EM VIGOR is the .innerText value not the class name. The class value is fieldValue and is associated with a td (table cell) element.
This is pretty easy if it only occurs once. Use Instr to see if present in page html
If Instr(ie.document.body.innerHTML,"ENQUADRAMENTO EM VIGOR") > 0 Then
Otherwise, you can gather a nodeList of td elements with that class name and loop testing the .innerText
Dim classes As Object, i As Long
Set classes = ie.document.querySelectorAll("td.fieldValue")
For i = 0 To classes.Length - 1
If classes.item(i).innerText = "ENQUADRAMENTO EM VIGOR" Then
'do something
'Exit For ....
End If
End Sub
$(document).ready(function() {
var lenfV = document.querySelectorAll(".fieldValue");
for(let i=0;i<lenfV.length;i++) {
if(lenfV[i].innerHTML == "ENQUADRAMENTO EM VIGOR") {
console.log("is there");
}
//else {console.log(213423);}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p> I think, The below option will help you</p>
<table>
<tr>
<td>
<table cellpadding="4" border="0" width="100%">
<tbody><tr>
<td class="fieldTitleBold" style="width=30%">Enquadramento em IVA</td>
<td class="fieldValue" colspan="3">NORMAL TRIMESTRAL</td>
</tr>
<tr>
<td style="width=10%" class="fieldTitleBold">Situação</td>
<td class="fieldValue" colspan="3">ENQUADRAMENTO EM VIGOR</td>
</tr>
</table>
</td>
</tr>
</table>
I have table without any class or id (there are more tables on the page) with this structure:
<table cellpadding="2" cellspacing="2" width="100%">
...
<tr>
<td class="cell_c">...</td>
<td class="cell_c">...</td>
<td class="cell_c">...</td>
<td class="cell">SOME_ID</td>
<td class="cell_c">...</td>
</tr>
...
</table>
I want to get only one row, which contains <td class="cell">SOME_ID</td> and SOME_ID is an argument.
UPD.
Currently i am doing iy in this way:
doc = Jsoup.connect("http://www.bank.gov.ua/control/uk/curmetal/detail/currency?period=daily").get();
Elements rows = doc.select("table tr");
Pattern p = Pattern.compile("^.*(USD|EUR|RUB).*$");
for (Element trow : rows) {
Matcher m = p.matcher(trow.text());
if(m.find()){
System.out.println(m.group());
}
}
But why i need Jsoup if most of work is done by regexp ? To download HTML ?
If you have a generic HTML structure that always is the same, and you want a specific element which has no unique ID or identifier attribute that you can use, you can use the css selector syntax in Jsoup to specify where in the DOM-tree the element you are after is located.
Consider this HTML source:
<html>
<head></head>
<body>
<table cellpadding="2" cellspacing="2" width="100%">
<tbody>
<tr>
<td class="cell">I don't want this one...</td>
<td class="cell">Neither do I want this one...</td>
<td class="cell">Still not the right one..</td>
<td class="cell">BINGO!</td>
<td class="cell">Nothing further...</td>
</tr> ...
</tbody>
</table>
</body>
</html>
We want to select and parse the text from the fourth <td> element.
We specify that we want to select the <td> element that has the index 3 in the DOM-tree, by using td:eq(3). In the same way, we can select all <td> elements before index 3 by using td:lt(3). As you've probably figured out, this is equal and less than.
Without using first() you will get an Elements object, but we only want the first one so we specify that. We could use get(0) instead too.
So, the following code
Element e = doc.select("td:eq(3)").first();
System.out.println("Did I find it? " + e.text());
will output
Did I find it? BINGO!
Some good reading in the Jsoup cookbook!
My table has several columns.
Each column should have dynamic width that depends on the browser window size. On the other hand, each column must not be too tiny. So I tried to set min-width for those columns but it's not a valid property. Tried min-width for <td> as well but that too is an invalid property.
Is there any way to set min-width for col/td in HTML table?
try this one:
<table style="border:1px solid">
<tr>
<td style="min-width:50px;border:1px solid red">one</td>
<td style="min-width:100px;border:1px solid red">two</td>
</tr>
</table>
min-width and max-width properties do not work the way you expect for table cells. From spec:
In CSS 2.1, the effect of 'min-width' and 'max-width' on tables, inline tables, table cells, table columns, and column groups is undefined.
This hasn't changed in CSS3.
Try using an invisible element (or psuedoelement) to force the table-cell to expand.
td:before {
content: '';
display: block;
width: 5em;
}
JSFiddle: https://jsfiddle.net/cibulka/gf45uxr6/1/
If you need your cells to be large enough to fit the largest word in that column, you can try surrounding that or those specific words with <span style="white-space: nowrap">; that will cause that specific word to not wrap, forcing the column-width to be a minimum of that dynamic width.
Idea from #Jon.
<table style="min-width:50px; max-width:150px;">
<tr>
<td style="min-width:50px">one</td>
<td style="min-width:100px">two</td>
</tr>
</table>
This works for me using an email script.
None of these solutions worked for me. The only workaround I could find was, adding all the min-width sizes together and applying that to the entire table. This obviously only works if you know all the column sizes in advanced, which I do. My tables look something like this:
var columns = [
{label: 'Column 1', width: 80 /* plus other column config */},
{label: 'Column 2', minWidth: 110 /* plus other column config */},
{label: 'Column 3' /* plus other column config */},
];
const minimumTableWidth = columns.reduce((sum, column) => {
return sum + (column.width || column.minWidth || 0);
}, 0);
tableElement.style.minWidth = minimumTableWidth + 'px';
This is an example and not recommended code. Fit the idea to your requirements. For example, the above is javascript and won't work if the user has JS disabled, etc.
One way should be to add a <div style="min-width:XXXpx"> within the td, and let the <td style="width:100%">
If you have set the percentages width of your columns and for you could be enough to FIX the entire table width or set a minimum width, this is valid
<table style="min-width:1000px;">
or
<table style="width:1000px;">
please note that this is said to work ONLY as inline style
I had this need with a bootstrap 5 table and my code ended to be
<table style="min-width:1000px;" class="table table-striped
table-hover table-bordered text-center table-responsive" id="tabella">
you better appreciate this when in mobile with small or empty TDs content
<table style="border:2px solid #ddedde">
<tr>
<td style="border:2px solid #ddedde;width:50%">a</td>
<td style="border:2px solid #ddedde;width:20%">b</td>
<td style="border:2px solid #ddedde;width:30%">c</td>
</tr>
<tr>
<td style="border:2px solid #ddedde;width:50%">a</td>
<td style="border:2px solid #ddedde;width:20%">b</td>
<td style="border:2px solid #ddedde;width:30%">c</td>
</tr>
</table>
I need to repeat an html snippet several times on a page but the problem is that the contained html elements have id defined that should be unique on page. So what is the proper way I could repeat this snippet without removing the id attribute from the elements ?
Could I use iframe as container for this snippet & let the duplicate ids exist on page?
You can use JavaScript to clone the snippet and at the same time change the IDs.
Example if your snippet is:
<div id="snippet">
<table id="list">
<tr id="0">
<td id="firstName0">John</td>
<td id="lastName0">Smith</td>
</tr>
<tr id="1">
<td id="firstName2">John</td>
<td id="lastName2">Doe</td>
</tr>
</table>
</div>
Using
$("#snippet").clone(false).find("*[id]").andSelf().each(function() { $(this).attr("id", $(this).attr("id") + "_1"); });
Will Produce
<div id="snippet_1">
<table id="list_1">
<tr id="0_1">
<td id="firstName0_1">John</td>
<td id="lastName0_1">Smith</td>
</tr>
<tr id="1_1">
<td id="firstName2_1">John</td>
<td id="lastName2_1">Doe</td>
</tr>
</table>
</div>
Which will solve the duplicate ID problem.