Why is centre alignment not working on ?
I was expecting the text to be centre aligned when i specify the class "center aligned" to my element but it does not.
However, if I specify the same class on all elements then it works.
Shouldn't it suffice when a class is specified at and all childrens inherit?
A fiddle is at http://jsfiddle.net/4woemsjt/4/
Basically this one does not work.
<div class="ui grid centered">
<div class="fourteen wide column">
<table class="ui celled collapsing table">
<thead>
<tr class="center aligned">
<th class="three wide">S1</th>
<th class="three wide">S2</th>
<th class="two wide">S3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
But this one does
<div class="ui grid centered">
<div class="fourteen wide column">
<table class="ui celled collapsing table">
<thead>
<tr>
<th class="center aligned three wide">S1</th>
<th class="center aligned three wide">S2</th>
<th class="center aligned two wide">S3</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</tbody>
</table>
</div>
</div>
you need to add the "center aligned" to all th-elements.
".ui.table thead th" has "text-align:left" set as default in the .css file.
Related
he guys i have a annoying issue i need your help i have a picture which size is:
W:814px
H:685
should be placed on the left side of the page ,I have a table which should be placed on the right side of the page,I thought I can achieve it with a simple bootstrap below:
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="" alt="">
</div>
<div class="col-sm-6">
<table>
</table>
</div>
</div>
</div>
but it becomes like the screen shot i have added here
i dont wana change the size of the pic
Here everything looks better with bootstrap latest version! Could you inspect your page
<!-- CSS only -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-KyZXEAg3QhqLMpG8r+8fhAXLRk2vvoC2f3B09zVXn8CA5QIVfZOJ3BCsw2P0p/We" crossorigin="anonymous">
<div class="container">
<div class="row">
<div class="col-sm-6">
<img src="https://unsplash.it/640/425" class="img-fluid"/>
</div>
<div class="col-sm-6">
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>#mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>#fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td colspan="2">Larry the Bird</td>
<td>#twitter</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm trying to create (using Semantic-UI and knockoutjs) a data table where each row has an expandable item (accordion) to show a sub-table of data related to the expanded row.
I have tried to use colspan="4" on my sub-table's <td> element, to no avail. No matter what I try, the sub-table seems to only exist within the first column of the parent table. The jsfiddle below demonstrates the issue better than my description, I'm sure.
https://jsfiddle.net/xpvt214o/908333/
This may be a simple CSS issue -- I'm no expert -- but nothing I've tried works for me. I also tried wrapping the sub-table as a <div>, but that seemed to break the accordion from collapsing.
<table class="ui celled table accordion">
<thead><tr>
<th ></th>
<th >ID</th>
<th>Name</th>
<th >FK1 ID</th>
<th >FK2 ID</th>
</tr></thead>
<tbody data-bind="foreach: arrayVM">
<tr class="ui title">
<td><i class="dropdown icon"></i></td>
<td data-bind="text: id"></td>
<td data-bind="text: name"></td>
<td data-bind="text: fk1id"></td>
<td data-bind="text: fk2id"></td>
</tr>
<tr style="display:none">
<td colspan="5" class="ui content">
<table class="ui inverted celled table" style="width:700px">
<tbody>
<tr>
<td><i class="ui logo add icon"></i></td>
<td data-bind="text: id"></td>
<td>column2</td>
<td>column3</td>
<td>column4</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
I want to create a responsive table with bootstrap and I divide the width of the table into 8-2-2 for 3 columns respectively.
Firefox can display it correctly but not in chrome.
<table id="tbl_sample" class="table table-hover">
<thead>
<tr>
<th class="col col-lg-8 col-md-8 col-sm-8 col-xs-8">text1</th>
<th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text2</th>
<th class="col col-lg-2 col-md-2 col-sm-2 col-xs-2">text3</th>
</tr>
</thead>
<tbody>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>HIJ</td>
</tr>
<tr>
<td>ABC</td>
<td>DEF</td>
<td>HIJ</td>
</tr>
</tbody>
</table>
Any idea? I have attached the full code here
https://jsfiddle.net/ocnrm6j7/
I want to pull data from DB and list it in a table.
The screen size is fixed and they shall not be extended(no scrolling).
Once there is no more "space" for table1, I want that the following items to be listed on a sided table2. So I don't want that the screen gets extended, scrolled.
This is how my code is.
<html>
<body>
<div class="container">
<div class="row">
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
</table>
</div>
</div>
</div>
</body>
This picture shows how I want my implementation:
Thanks in advance.
I'd like you to try this "column-count"-techique:
div {
column-count: 4;
column-width: 150px;
column-rule: 1px solid slategrey;
}
https://codepen.io/rinatoptimus/pen/qqgBMN
The solution was to use the JSTL core begin and end attributes:
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
<tbody>
<c:forEach items="${somedata}" var="data" begin = "0" end = "5">
<tr>
<td>${data.time}</td>
<td>${data.message}</td>
<td>${data.location}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
<div class="col-md-6">
<table class="table">
<thead>
<tr>
<th style="background-color: transparent">TIME</th>
<th style="background-color: transparent">LOCATION</th>
<th style="background-color: transparent">MESSAGE</th>
</tr>
</thead>
<tbody>
<c:forEach items="${somedata}" var="data" begin = "6" end = "11">
<tr>
<td>${data.time}</td>
<td>${data.location}</td>
<td>${data.message}</td>
</tr>
</c:forEach>
</tbody>
</table>
</div>
I've a html where i want a particular cell to be aligned to left. below is the code and fiddle link.
HTML:
<section class="tr_chapter">
<div class="chapter"><a name="HKWBV1_ORD_89"></a>
<div class="toc">
<div class="toc-part">
<table class="toc-div">
<tbody>
<tr>
<td>
<table class="toc-item-third-level">
<tbody>
<tr>
<td></td>
<td class="toc-item-num-left"><span class="font-style-bold">Contents</span></td>
<td class="toc-title"></td>
<td class="toc-pg"><span class="font-style-italic">para.</span></td>
</tr>
<tr>
<td>4/0/1</td> <td class="toc-item-num-left">1.</td>
<td class="toc-title">Companies (O.4, r.2)</td>
<td class="toc-pg">4/2</td>
</tr>
<tr>
<td></td>
<td class="toc-item-num-left">2.</td>
<td class="toc-title">Consolidation, etc., of causes or matters (O.4, r.9)</td>
<td class="toc-pg">4/9</td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</section>
I want the output as given in the below image. i.e. the number (4/0/1). please let me know how can i do it.
Fiddle
Thanks
If you want the cell with the number 4/0/1 aligned left simply give align="left" to the parent td or add to it a class with text-align:left;
See: jsfiddle