I'm trying to create an HTML layout with header, footer and 3 content sections. It does work for simple sections; however for the code below, I get table2 spanning past footer:
<html>
<body style="display: flex; flex-direction: column">
<header style="text-align: center">
Header
</header>
<section style="display: flex; flex-direction: row; flex: 1">
<section>
<table style="border-style: dotted">
<thead>
<tr><th>Col1</th><th>Col2</th><th>Col2</th></tr>
</thead>
<tbody>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
</tbody>
</table>
<br/>
<table id="table2" style="border-style: dotted">
<thead>
<tr><th>Col1</th><th>Col2</th><th>Col2</th></tr>
</thead>
<tbody>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
<tr><td>Val1</td><td>Val2</td><td>Val3</td></tr>
</tbody>
</table>
</section>
<section style="border-style: dotted">test</section>
<section style="border-style: solid">another</section>
</section>
<footer>
Footer
</footer>
</body>
</html>
Is it possible to make table2 scrollable, ideally only tbody part?
Related
I am having hard time clicking on an individual icon within this table shown bellow.
I tried the code bellow , but did not work
cy.get('table >tbody >tr td:nth-child(1) fa-icon:nth-child(1)').click({multiple: true})
Visual:
Inspected DOM:
DOM text:
<div _ngcontent-ixx-c110 stickything class="d-block grid is-sticky" style="z-index: 1; top: 0px; width: auto; left: auto; position: sticky;">
<div _ngcontent-ixx-c110 class="d-flex ng-star-inserted">
<table _ngcontent-ixx-c110 class="table table-sm table-bordered">
<thead _ngcontent-ixx-c110 class="bg-color text-center text-black">...</thead>
<tbody _ngcontent-ixx-c110 class="text-center ng-star-inserted">
<tr _ngcontent-ixx-c110 class="bg-addition ng-star-inserted">
<td _ngcontent-ixx-c110 class="stickyContainertd ng-star-inserted" style="width: 20px; padding-top: 4px !important;">
<fa-icon _ngcontent-ixx-c110 size="sm" class="ng-fa-icon ng-star-inserted" css="6">...</fa-icon>
<!-- -->
<!-- -->
Performance insights
</td>
</tr>
...
</tbody>
</table>
</div>
</div>
You'll need to add an :nth-child() to the row (<tr>) as well as column (<td>), presuming the rows all have the same pattern of content.
For example:
cy.get('table >tbody >tr:nth-child(1) td:nth-child(1) fa-icon:nth-child(1)')
.should('have.length', 1)
.click()
or .eq() works
cy.get('table tbody')
.find('tr').eq(0)
.find('td').eq(0)
.find('fa-icon').eq(0)
.should('have.length', 1)
.click()
I have a table like this:
<div class="container">
<div class="row">
<div class="col-12">
<table>
<tbody>
<tr>
<td>some content</td>
<td>http://insertreallylongurlhere</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
I'm using this css:
body {word-break: break-word;}
On mobile (or at small screen sizes) on Edge, the long url won't break and overflows off-screen.
It works fine except for in Edge. I know Edge doesn't really like word-break: break-word.
So, I've tried word-wrap: break-word and overflow-wrap: break-word on both the table and on the td. However, it seems like tables don't like that.
If I add table-layout: fixed and a width (such as width: 100%) to my table, the words wrap properly, but the width style breaks my table. It breaks out of my containing div.
Does anyone know another solution to this issue?
Try to use the overflow-wrap: break-word; property, more detail information, please check the overflow-wrap CSS property.
Besides, you could also try to use the word-break: break-all; property, instead of word-break: break-word;
<style>
body {
word-break: break-word;
}
table td {
width: 100px;
word-break:break-all;
}
</style>
<div class="container">
<div class="row">
<div class="col-12">
<table border="1">
<tbody>
<tr>
<td>some content</td>
<td>http://insertreallylongurlhere</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
The result like this:
I have a child component in Vue js. Where i have a list of object which i am filtering based on InvGroup. I am facing issue when trying to create accordion format. I tried using , tag to surround the accordion content but none of them work. Please suggest a solution.
<div id="accordion" class="div-shadow col-md-12 col-lg-12 col-sm-12 col-xs-12">
<div v-for="invGroup in invGroupTotals">
<label>{{invGroup.Group}}<span style="float:right;" v-if="invGroup.DiffTotal === 0" class="text-success"> No Difference </span><span class="text-danger" style="float:right;" v-else>Diffrence Count {{invGroup.DiffTotal}} , Amount ${{invGroup.DiffAmtTotal}}</span></label>
<div style="text-align: center; background-color: white;height:400px;overflow-y:scroll;" >
<table cellpadding="10" style="border-style: solid; border-color: Gray; border-collapse: separate;border-spacing: 2px" class="table tableStyle col-md-12 col-lg-12 col-sm-12 col-xs-12">
<tr>
<th v-for="column in weeklyReconcileGridColumns">{{column}}</th>
</tr>
<template v-for="item in weeklyReconcileList">
<tr v-if="invGroup.Group === item.UPCGroup">
<td >{{item.UPCID}}</td>
<td class="text-left" v-on:click="showItemHistory(item.UPCID, item.UPCDesc)">{{item.UPCDesc}}</td>
<td >{{item.SystemBOH}}</td>
<td >{{item.CurrentWeekBOH}}</td>
<td >{{item.Diffrence}}</td>
<td >{{item.TotalSalesAmount}}</td>
</tr>
</div>
<tr>
<td class="text-center" colspan="2"> Total</td>
<td> {{invGroup.SysTotal}}</td>
<td> {{invGroup.CountedTotal}}</td>
<td> {{invGroup.DiffTotal}}</td>
<td> {{invGroup.DiffAmtTotal}}</td>
</tr
</table>
</div>
I added the jquery in updated method.
updated: function () {
$("#accordion").accordion();
}
The problem is the looping tag should not be surrounded by and HTML tag.
Try using template tag instead of div tag
I am trying to create popovers that contain a table, but the table is being displayed outside of the popover. Trying to adjust the width of the popover content is not solving the problem.
Setting styles for popover-content for width of max-width is not solving the problem. Does anyone know how I can fix this?
$('[data-toggle=popover]').popover({
container: 'body',
html: true,
content: function () {
return $('#popover-content').html();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">
<img src="\img\help.png" alt="?" style="width:20px;height:20px;border:0">
</a>
<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
<table style="width: 400px;">
<thead>
<tr>
<th>heading 1</th>
<th>heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content row 1 col 1</td>
<td>Content row 1 col 2</td>
<td>Content row 1 col 3</td>
<td>Content row 1 col 4</td>
</tr>
</tbody>
</table>
</div>
Please include the css .popover {max-width: 100% !important;}.Once popover on image it will add popover class to desired places. so you need to override the max-width value.
$('[data-toggle=popover]').popover({
container: 'body',
html: true,
content: function () {
return $('#popover-content').html();
}
});
.popover {
max-width: 100% !important;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<a href="#" class="mytooltip" data-toggle="popover" data-container="#wrap" data-trigger="hover" data-placement="auto right">
<img src="http://91ef69bade70f992a001-b6054e05bb416c4c4b6f3b0ef3e0f71d.r93.cf3.rackcdn.com/sea-gull-100219122.jpg" alt="?" style="width:20px;height:20px;border:0">
</a>
<div id="popover-content" class="hide" style="width: 800px; max-width: 100%;">
<table style="width: 400px;">
<thead>
<tr>
<th>heading 1</th>
<th>
heading 2</th>
<th>heading 3</th>
<th>heading 4</th>
</tr>
</thead>
<tbody>
<tr>
<td>Content row 1 col 1</td>
<td>Content row 1 col 2</td>
<td>Content row 1 col 3</td>
<td>Content row 1 col 4</td>
</tr>
</tbody>
</table>
</div>
<table border="0" align="center">
<tbody>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
<tr>
<td>Cell1</td>
<td>Cell1</td>
</tr>
</tbody>
</table>
I am not good with coding. I've tried but cannot figure it out. Your help would be greatly appreciated.
// CSS:
#container {
text-align:center; // needed if you expect IE 5
}
.centered {
margin:0px auto; // this sets left/right margin to auto and
// centers the element
}
// HTML:
<div id="container">
<table class="centered" border="0">
...
</table>
</div>
Or if you want to style inline:
<div style="text-align:center;">
<table style="margin:0px auto;" border="0">
...
</table>
</div>
Try this:
<div style="width: 100%; text-align: center;">
<!-- Your table here -->
</div>