I need to create the CSS that will modify the style of:
<th class="sort-column" data-is-only-head="false" data-field="daysElapsedfromInfoReceived" style="text-align: left;"><!-- react-text: 463 --> <!-- /react-text --><!-- react-text: 464 -->Days Elapsed From Info. Received<!-- /react-text --><!-- react-text: 465 --> <!-- /react-text --><span class="order"><span class="dropdown"><span class="caret" style="margin: 10px 0px 10px 5px; color: rgb(204, 204, 204);"></span></span><span class="dropup"><span class="caret" style="margin: 10px 0px; color: rgb(204, 204, 204);"></span></span></span><div></div></th>
(Got this from chrome)
so style = "text-align: left; white-space: normal"
I tried:
th .sort-column {
text-align: left;
white-space: normal !important;
}
and also:
th.sort-column {
text-align: left;
white-space: normal !important;
}
with no luck. I need the content of this th to be in multiple lines.
According to Chrome, the next is the CSS hierarchy:
I've formatted your table a little bit and colored it grey to show the cell size:
th.sort-column {
text-align: left;
background-color: grey;
min-width: 10rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>
<table>
<th class="sort-column">Days Elapsed From</th>
<th class="sort-column">Info</th>
<th class="sort-column">Received</th>
</table>
I need the content of this th to be in multiple lines.
When changing min-width into width that'll force the browser to introduce linebreaks:
th.sort-column {
text-align: left;
background-color: grey;
width: 6rem;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" />
<table>
<th class="sort-column">Days Elapsed From</th>
<th class="sort-column">Info</th>
<th class="sort-column">Received</th>
</table>
Related
Currently working on my first SvelteKit project.
I have created a "+layout.svelte" file which uses a navbar and footer component from my lib folder.
When I add content to a page, it's currently overlapping the navbar.
+layout.svelte
<script>
import Nav from "$lib/nav.svelte";
import Footer from "$lib/footer.svelte"
</script>
<body>
<Nav />
<Footer />
</body>
<slot></slot>
<style>
body {
margin: 0;
}
</style>
nav.svelte
<script>
const nav = [
{ title: "Home", path: "/" },
{ title: "Products", path: "/products"},
{ title: "News", path: "/news"},
]
</script>
<nav>
<ul>
{#each nav as item}
<li><a href={item.path}>{item.title}</a></li>
{/each}
</ul>
</nav>
<style>
nav {
position: fixed;
width: 100%;
padding-bottom: 0.01%;
box-shadow: 0 1px 1px -1px black;
}
ul {
list-style: none;
text-align: center;
padding-left: 0;
}
li {
display: inline-block;
margin-right: 2em;
font-weight: bold;
}
</style>
"+page.svelte" that affects +layout.svelte
<script>
import products from "..\\products.json";
</script>
<table id="productSearchResult">
<thead>
<tr>
<th></th>
<th>Product ID</th>
<th>Supplier ID</th>
<th>Status</th>
</tr>
</thead>
<tbody>
{#each products as product}
<tr>
<td><img src="product.jpg" alt="product"></td>
<td>{product.productId}</td>
<td>{product.supplierId}</td>
<td>{product.statusId}</td>
</tr>
{/each}
</tbody>
</table>
<style>
#productSearchResult {
text-align: center;
/* This also affects the navbar */
margin-top: 5%;
padding: 10px;
border: 1px solid #bebebe;
box-shadow:
15px 15px 30px #bebebe,
-15px -15px 30px #ffffff;
}
#productSearchResult img {
width: 50px;
}
</style>
When I tried to add margin-top to the html table for it to be displayed below the navbar, the navbar is affected aswell. The table is inside a "+page.svelte" from another route.
As far as I understand, css inside a "+page.svelte" should only apply to the current file.
What am I doing wrong?
That is not CSS affecting other elements, you have the nav element set to position: fixed, so it will stay in that place of the viewport regardless of everything else. Use a different placement mechanism if that is not intended.
(Also, don't add body elements, there should only be one and that should be in the app.html file. Hierarchically the page <slot/> should appear between header and footer, otherwise tab navigation and screen reader order will make no sense.)
I am working on Bootstrap. I wanted to make block inside table responsive.
As I resize the browser, block (bluebox) inside table is not adjusting according to screen size. I am new to Bootstrap.
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
min-width:267px;
width:100%;
display:block;
overflow:auto;
}
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link type="text/css" href="bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="page_info">
<div class="breadcrumb">
Home
<span class="delimiter fa fa-arrow-circle-right"></span>
<span class="current" style="font-weight: 300;font-size: 12px;color: #666;">Link us</span></div>
<div class="page-title">
<h1 style="font-family: 'Roboto';font-size: 40px;line-height: 44px;color: #339933;font-weight: 300;">Link us</h1>
</div>
<div class="clearfix"></div>
</div>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">To link to us, please choose and save one of the logos displayed below, and link it to ' http://www.dubaiexporters.com '.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">As per our linking Policy, no prior permission is required to link 'DubaiExporters.com' from your website. However, we would like you to inform us (using the 'Contact us' option) about any links provided to this Portal so that you can be informed of any changes or updates.</p>
<p style="font-family:'Merriweather', sans-serif;font-size:16px;padding-left:18px;">We encourage you to choose from the following graphic banners which can be conveniently placed on your website and linked to our Portal.</p>
<p><b style="color: #339933;padding-left:18px; font-size:20px;">Banners for Download </b></p>
<table class="table table-bordered" style="margin-left:18px;">
<thead>
<tr>
<th>Banner</th>
<th>Link</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<img src="images/dubaiexportersbanners/dubaiexporters_168x72.gif" alt="dubaiexporters.com 130x38 jpg" width="168" height="72">
</td>
<td>
<div class="bluebox"><a href="http://www.dubaiexporters.com/"><img src="http://www.dubaiexporters.com/images/dubaiexporters_168x72.gif" border="0" alt="Dubai Exporters - Directory of Exporters, Manufacturers & Suppliers" /></a></div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Link: https://jsfiddle.net/1h0bt35f/4/
Update: Add word-break: break-all; to the CSS class.
Also, you would need to define width in percentage in order to make it responsive.
Currently, you have given bluebox a width of 267px.
Try the below code where you can set a min-width of 267px and it will handle automatically when it scales due to width as 100%.
.bluebox {
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow: hidden;
width: 100%;
display: block;
overflow: auto;
word-break: break-all;
}
Try this:
.bluebox
{
background-color: #F6F6FF;
border: 1px solid #232850;
font-size: 10px;
padding: 10px;
overflow:hidden;
width: 26%;
display:block;
overflow:auto;
}
I've found some very strange behaviour with Chrome with respect to the following CSS...
CSS:
table.addressBody {
width: 100%;
min-width: 100%;
}
table.addressBody tr td {
padding: 4px;
width: 40%;
min-width: 40%;
max-width: 40%;
border: none;
vertical-align: middle;
}
table.addressBody tr td.left, table.addressBody tr td.right {
background-color: White;
border: 2px solid #aaa;
}
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
text-align: center;
}
HTML:
<div class="fitWidth centre">
<strong>Mr Smith</strong><br />
29/05/2014 11:17:00 - Department, Site
</div>
<table class="addressBody">
<tr>
<td class="left">
<select name="ctl00$phBody$repPatients$ctl01$ddlPickup" id="ctl00_phBody_repPatients_ctl01_ddlPickup"></select>
</td>
<td class="centre" style="border: none;"> </td>
<td class="right">
<select name="ctl00$phBody$repPatients$ctl01$ddlDest" id="ctl00_phBody_repPatients_ctl01_ddlDest"></select>
</td>
</tr>
<tr>
<td class="leftShadow" colspan="2">
<img src="../img/other/bottomShadowLt.png" alt="Shadow" />
</td>
<td class="rightShadow">
<img src="../img/other/bottomShadowRt.png" alt="Shadow" />
</td>
</tr>
</table>
(Fiddle)
The problem is the centre cell of the table which has a bottom border, despite the fact that I haven't actually specified that there should be one. I've tried the same code in both IE and FF and both produce the desired result (two outer cells with borders and the inner without).
I have also tried coding the CSS in turn for each border on all of the cells, but as soon as I code the #left cell bottom-border the centre cell is also bordered on the bottom. Also, notice in relation to this question there is no border collapse in the code (unless it's part of Fiddle itself).
Can anyone spot anything obvious that I've missed or know of any bug with Chrome that has a workaround?
-- EDIT --
But you did specify that it have a bottom border:
table.addressBody tr td.centre {
width: 20%;
min-width: 20%;
max-width: 20%;
border-bottom: 2px solid #aaa; <---
text-align: center;
}
As it turns out, my post is, in fact, a duplicate of this question, and so, if you wish to close it, please feel free.
<table>
<tr><td>test</td></tr>
<tr>
<td>
<div style= height:200px;">
<div style="border:1px solid yellow; display: inline-block; width:100px">
<img src="orderedList4.png">
</div>
<div align="center" style="border:1px solid green; display: inline-block; width:650px;height:100px;">
<div>center Test Header1</div>
<div>center Test Header2</div>
</div>
<div align="right" style="border:1px solid red;display: inline-block; width:100px">REL 1.0</div>
</div>
</td>
</tr>
</table>
In the above code, the image size is 75*75 pixels.
I want to have all the three cells to have a height of 100 pixels.
I want the image to be centered and left aligned.
The middle text to centered.
Third text to centered and right aligned.
I could not make it working.
Inline styles are a nightmare to maintain, and you should generally be trying to keep presentation separate from the content. I've moved all the styles out of the actual tags, and since you're using a table and refer to each div as a cell, I'm guessing you meant to have each one an actual cell.
<style>
.product_table {
width: 850px;
}
.product_table td {
height: 100px;
border: solid 1px #000;
vertical-align: middle;
}
.product_table .image {
width: 100px;
border-color: yellow;
text-align: left;
}
.product_table .title {
/* Automatically sizes its width */
border-color: green;
text-align: center;
}
.product_table .release {
width: 100px;
border-color: red;
text-align: right;
}
</style>
<table class="product_table">
<tr>
<th colspan="3">test</th>
</tr>
<tr>
<td class="image">
<img src="orderedList4.png" />
</td>
<td class="title">
<div>center Test Header1</div>
<div>center Test Header2</div>
</td>
<td class="release">
REL 1.0
</td>
</tr>
</table>
The top row is probably a table heading though, so you should consider moving that out of the table as a h2 or whatever level it'll be used in. And make sure a table is the most appropriate element here – unless you're going to have multiple rows of whatever this item is, you might be better off just using divs without tables.
I'm attempting to display a column separator for a table in IE8. I'm using CSS which works great in Chrome and Firefox but in IE8 the corner of the table cells with the black column separator appear differently. You can view the differences in the the below images. The first image is from IE8 which is showing the results that I do not want and the second image is from Chrome which shows how I want the table to appear.
The source is below, you can also edit it at http://jsbin.com/obava4/2/edit:
table.testresults
{
border-collapse:collapse;
}
table.testresults td {
padding: 3px;
border-style:solid;
border-width: 4px;
border-color:lightgray;
font-size: 8pt;
font-family: Arial;
font-weight:400;
}
table.testresults *.borderleft {
border-left-color: black;
border-left-style: solid;
border-left-width: 5px;
}
table.testresults th {
font-size: 0.7em;
font-family: Arial;
padding: 3px;
spacing:0px;
border-bottom-color: lightgray;
border-style:solid;
border-width: 4px;
border-color:lightgray;
}
</style>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
</head>
<body>
<table class="testresults">
<col id="col1"><col id="col2"><col id="col3">
<tr class="currenv">
<th class="corrcorrenv borderleft" align="left" colspan="1">CORR of COR</th>
<th class="correnv borderleft" align="left" colspan="1">CORR</th>
</tr>
<tr class="currenv">
<th width="50px" class="resultheader borderleft" align="left">Result</th>
<th class="nowrap">Age </th>
</tr>
<tr>
<td class="borderleft" TestResultsID="">Pased</td>
<td>row.ARAge</td>
</tr>
</table>
</body>
</html>
</body>
</html>
I'm afraid it's just the way IE renders table cell borders. Alternatively, you could try wrapping the cell content in a div and giving the borders to the div, but it's quite a challenge to get divs to fill a table cell - reference this SO question.