Basically, because of the layout of my website ( I'm using IP.Content with my IP.Board forum ) I can't really have a single table here. Well, I probably could, but I don't understand how, so I might be asking the wrong question.
Anyway, here's my code:
<div class="box" style="width: 81%; float: right;">
<div class="ipsSideBlock clearfix __xXtop20520players">
<h3 id="anonymous_element_8">
<table style="width:100%;">
<tr>
<th style='text-align: center;'> Icon </th>
<th style='text-align: center;'> Item Name </th>
<th style='text-align: center;'> Description </th>
<th style='text-align: center;'> Price </th>
<th style='text-align: center;'> Controls </th>
</tr>
</h3>
</table>
<div class="_sbcollapsable">
<ul class="shoplist">
<li class="clearfix">
<div class="list_content">
<table>
<tr>
<td> <img src="http://placehold.it/50x50.png" width="50px" height="50px"/> </td>
<td> Item </td>
<td> This is a test description </td>
<td> $29.99 </td>
<td> Button. </td>
</tr>
</table>
</div>
</li>
</ul>
</div>
</div>
</div>
As you can see I have the Table header and the Table data in different sections, this is because of the sheer amount of styling that comes with IP.Board. I'm not very experienced with any of this, but this looks exactly how I want it to.
The only problem is that the table data doesn't stretch the table-headers sizes accordingly with the data. When I look at it, it makes sense as to why. I attempted to leave the table open, but that just made everything show up in the h3 element.
Related
I'm working on some HTML code for which I was given a UI. I tried to do most to make it look as close as possible. But I'm stuck with the header and line spacing pieces. Here is my code:
<div>
Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
**All times are Arizona Time**
</div>
<table style="border:1px solid #e9e9e9">
<thead bgcolor="#8c8c8c" style="border-bottom:1px solid #e9e9e9; padding:none !important">
<tr>
<th style="width:auto">10:00AM - 10:30AM (30 MIN)</th>
<th style="width:auto; float:right">Abc</th>
</tr>
</thead>
<tbody>
<tr>
<td><div style="line-height:2em">
Topic:</div></td>
<td><div>Resume Review</div></td>
</tr>
<tr>
<td><div style="line-height:2em">Phone:</div></td>
<td>1234567890</td>
</tr>
<tr>
<td><div style="line-height:2em">Email:</div></td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td><div style="line-height:2em">Student notes:</div></td>
<td>Hello,
My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing.
I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
</tr>
</tbody>
</table>
Note: I need to use the inline styling, I can't use external CSS in my system.
Here is the UI provided:
How can I match the UI and also make it responsive?
Instead of using table for header, you can use div.
Check the below code.
<div>
Hello, Alice! Here are your appointments for the day:
</div>
<div style="font-style:italic">
**All times are Arizona Time**
</div>
<div style="border: 1px solid black">
<div style="width:100%; background-color:#8c8c8c; height:20px; display:flex;justify-content:space-between;align-items:center">
<p>10:00AM - 10:30AM (30 mins)</p>
<p>Data</p>
</div>
<table>
<tbody>
<tr>
<td>
<div style="line-height:2em">
Topic:</div>
</td>
<td>
<div>Resume Review</div>
</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Phone:</div>
</td>
<td>1234567890</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Email:</div>
</td>
<td>abc#gmail.com</td>
</tr>
<tr>
<td>
<div style="line-height:2em">Student notes:</div>
</td>
<td>Hello, My resume is pretty ugly, I built it based on what I learned in TAPS in military out-processing. I will be standing by for the phone call, I missed my last one because I mixed up the appointment time zone.</td>
</tr>
</tbody>
</table>
</div>
I'm showing a member who has a higher rank. Based on that, I have to show the user image along with the username.
but I'm not able to align the image and text efficiently..The problem is some username consists of a longer number of characters. As a result, the username showed in a zig-zag position..
so far, I've tried
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='../assets/img/gold.png'/>Rank</th>
<th><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
<tr>
<td>
1
</td>
<td>
<div class='text-center'>
<img src='images' alt='user dp' class=' img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>#$username</span>
</div>
<td>
</tr>
</thead>
<tbody>
Expected output:
Rank Member
1 image Dravid
2 image Richard Nixon
3 image GrahamBell
4 image Mark twains
Output's getting:
Rank Member
1 image Dravid
2 image RichardNixon
3 image GrahamBell
4 image Mark twains
img {margin-right:10px;};
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<table class="table table-striped">
<thead>
<tr>
<th scope="col">Rank</th>
<th scope="col">Member</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td><img src="image"/>member</td>
</tr>
<tr>
<th scope="row">2</th>
<td><img src="image"/>anotherMember</td>
</tr>
<tr>
<th scope="row">3</th>
<td><img src="image"/>oneMoreMember</td>
</tr>
</tbody>
</table>
Please check your table markup, it doesn't seems to have any data in <tbody> . If you have to show the user image before the username place the <img/> inside the <td> tag just before the name of the member(in your case username). This will give you the alignment as per your need, no matter how long is the username provided that the size(mostly width) of all the images is same. I have included little CSS just to provide some space between all images and usernames. Also make sure this space remains constant for all images, if you wish to include it.
Your problem is that you are using the text-center class on each <tr>'s second <td> (to display the username). That's because your those are centered accordingly resulting in this bug:
In order to solve this you have to replace it with text-left like in this example. The same for the second <th>. In order to place your item more to the right, apply a padding-left, e.g., by adding Bootstrap's pl-5:
<table style="width: 100%; table-layout: fixed" class="table table-striped text-center">
<thead class='bg-dark' style='background-color: 3658DE'>
<tr>
<th><img src='https://via.placeholder.com/25'/> Rank</th>
<th class="text-left pl-5"><i class='fa fa-user mr-1' style='color: #F4B806'></i>Members</th>
</tr>
</thead>
<tbody>
<tr>
<td>
1
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>Dravid</span>
</div>
</td>
</tr>
<tr>
<td>
2
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>RichardNixon</span>
</div>
</td>
</tr>
<tr>
<td>
3
</td>
<td>
<div class='text-left pl-5'>
<img src='https://via.placeholder.com/150' alt='user dp' class='img-fluid rounded-circle' style='height: 30px; width: 30px;' />
<span class='mr-1 '>GrahamBell</span>
</div>
</td>
</tr>
</tbody>
</table>
You can find a running fiddle here, which produces the following table:
I have an html table that is cutting off all rows beyond the 200th. The rows are in fact there, because the list.js javascript search feature will find data in them if I search for it, but they don't display when the table loads.
Is this a limitation or setting in bootstrap or some other html thing?
Update - here is a simplified version of the table.
Also, the javascript libraries I'm using on this page that interact with the table are list.js and treetable.js.
I will note that I have seen this issue on another app I developed, but 99% of the time it wasn't an issue so it was never resolved. On this app in question, it will almost always be an issue.
<div class="table">
<div class="table-responsive" id="table3div">
<table class="table table-hover table-condensed tablesorter" id="table3">
<thead>
<tr>
<th>
<div class="checkbox custom-control custom-checkbox">
<label>
<input type="checkbox" id="checkAlltable3" />
<span class="custom-control-indicator"></span>
</label>
</div>
</th>
<th class="header">Description</th>
<th class="header">Status</th>
<th class="header">Associated With</th>
<th class="header">Assigned To</th>
<th class="header">ID</th>
<th class="header">Type</th>
<th class="header headerSortDown">Due Date</th>
</tr>
</thead>
<tbody class="list">
#for (int i = 0; i < Model.IssuesAndNotes.Count; i++)
{
<tr>
<td>
<div class="checkbox custom-control custom-checkbox">
<input id="checkBox" type="checkbox">
</div>
</td>
<td class="description">
Some data
</td>
<td class="status">
Some data
</td>
<td class="association">
Some data
</td>
<td class="assignedTo">
Some data
</td>
<td class="issueId">
Some data
</td>
<td class="type">
Some data
</td>
<td class="date">
Some data
</td>
</tr>
}
</tbody>
</table>
</div>
The default limit in list.js is 200 you can modify the limit in the parameters https://github.com/javve/list.js#parameters
For clarification look to the API docs on page options http://listjs.com/api/
I need to set a link on a picture. I have to set it up in tables, which I did. But I cannot understand why the picture is linking in full width. That means the background color is also a link. That link should only be on the picture.
If it was a div tag it could be solved with a wrapper, but I do not know how to solve that within tables?
My Example
This is my code:
<body>
<table class="wrapper" align="center">
<tr>
<td class="wrapper-inner">
<!-- Row 1 -->
<table class="row collapse" >
<tbody>
<tr>
<th class="small-12 large-12 columns first">
<table>
<tr>
<th>
<img src="http://3.bp.blogspot.com/-Z4vZ7AsD6Bc/T_PNRK_9f2I/AAAAAAAAAH4/t3UZ3BQyqdE/s1600/shutterstock.jpg" alt="test" align="center" class="float-center" >
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
<!-- Row 2 -->
<table class="row collapse bgcolor--blue">
<tbody>
<tr>
<th class="small-12 large-12 columns">
<table>
<tr>
<th>
<img src="http://24.media.tumblr.com/7a40daf7853d830815fb83f79752e94a/tumblr_mz2izkaidT1rfn9zxo4_500.png" alt="Fashion news" align="center" class="float-center">
</th>
<th class="expander"></th>
</tr>
</table>
</th>
</tr>
</tbody>
</table>
</td>
</tr>
</table>
</body>
I didn't notice this should happen. Try this CSS :
th {
text-align: center;
}
th a {
display: inline-block;
}
edit using #SpencerMay comment
Following is the code structure of my HTML table. I insert a large image in tr class c0 (marked by *...*). The class no-overflow has overflow:auto. In other pages, using the same class no-overflow there are horizontal and vertical scroll bars if the image gets big. However, in this particular case, the bars do not appear.
<table class="someclass" width="60%">
<thead>
<tr>
<th class="header c0" style="text-align:left;">Content: Test 1</th>
<th class="header c1">Class Statistics</th>
</tr>
</thead>
<tbody>
**<tr class="r0">
<td class="cell c0" style="text-align:left;">Question: <br>
<div class="no-overflow">
<div class="no-overflow">
<p><img src="image path" width="1365" height="767"></p>
</div>
</div>
</td>
<td class="cell c1" style=""> </td>
</tr>**
<tr class="r1">
<td class="cell c0" style="text-align:left;">Answer:</td>
<td class="cell c1" style=""> </td>
</tr>
<tr class="r0">
<td class="cell c0" style="text-align:left;"><input type="button" name="1" value="Next"> Next </td>
<td class="cell c1" style=""></td>
</tr>
<tr class="r1 lastrow">
<td class="cell c0" style="text-align:left;"></td>
<td class="cell c1" style=""> </td>
</tr>
</tbody>
</table>
Table Image:
overflow:auto by itself on a table-cell isn't going to do anything, unfortunately. Table cells will resize themselves to allow them to fit their contents. However, if you add a fixed width and height to the table cell, the overflow works fine and the scroll bars are visible.
See this fiddle.