I'm using Powershell ConvertTo-HTML to build a three column table. I want to display a header image in the first row that spans all three columns. The table looks great but the image in the first row is like 1px thick.
I've tried resizing the columns, the image, only using 1 column instead of spanning...
Here's the generate code from the Powershell script:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
table {
border-collapse: collapse;
width: 700px;
}
td, th {
border: 1px solid #ddd;
font-family: Arial;
font-size: 14px;
padding: 8px;
}
th {
padding-top: 12px;
padding-bottom: 12px;
text-align: left;
background-color: #4286f4;
color: white;
}
</style>
</head><body>
<table>
<tr>
<td colspan='3' >
<img src='file:///\\fileserver\files\file1.jpg'/>
</td>
</tr>
<tr>
<td style='width:10%'></td>
<td>Test</td>
<td style='width:10%'></td>
</tr>
</table>
<table>
</table>
</body></html>
Thanks for any help.
Jeff
I finally figured it out. The image was around 2,500px and way to large so was getting compressed into the space.
Thanks everyone for you suggestions.
Related
I have a fairly simple table with two rows, each of which has one cell. The table has a colored border. The top row/cell has a white background. The bottom row/cell has a colored background. The problem is that the bottom row/cell has a thin, white border that I do not want there. Can anyone suggest a code modification to get rid of that border? My code is below, and here is a screenshot with the purple arrows pointing to the border that I am trying to eliminate. Thanks for any suggestions.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
.table1 {
border: 4px solid #FF7C7C;
float: initial;
}
.td1 {
width: 530px;
padding: 5px 35px 5px 35px;
font-family: verdana, geneva, sans-serif;
font-size: 16px;
line-height: 22px;
color: #62605d;
text-align: left;
vertical-align: top;
}
</style>
</head>
<body>
<table class="table1">
<tr class="td1">
<td class="td1" style="text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
<tr style="border-style: none;">
<td class="td1" style="border: none; border-spacing: 0px; background-color: #FF7C7C; color: #ffffff; font-size: 11px; text-align: center;">
Text line 1.<br />
Text line 2.<br />
Text line 3.
</td>
</tr>
</table>
</body>
</html>
UPDATE: Thank you to #Alohci, #lv_ and #PleaseDontHurtMe.jpeg for those quick responses. Interestingly, the border-spacing tag for table fixed the problem when previewed on w3schools, but when I made the change in Visual Studio the border remained. I had to add the border-collapse tag to fix it for Visual Studio. Ah, the mysteries of HTML...
Try border-collapse: collapse; in your .table1
Table has default border-spacing
.table1 {
border-spacing: 0;
}
I created a Prediction table for my website but I want an automatic updated for my table from livescore. Please can anyone help me with the right code
This is the html table
<!DOCTYPE html>
<html lang="en">
<body>
<table>
<tr>
<th colspan="2"><b>England » Premier</b></th>
<th><b>Prediction</b></th>
</tr>
<tr>
<td> 24-06:20:16</td>
<td>Red Bull Bragantino <b style="color:red"> 2 : 1 </b> Ponte Preta</td>
<td <td style="background-color:none;color:none;"><b>Home Win</b></td>
</tr>
</table>
</body>
</html>
This is the css code
table,
th,
td {
border: 0px solid black;
border-collapse: collapse;
}
table {
width: px;
}
th {
color: white;
background-color: black;
}
th,
td {
font-size: 25pt;
font-family: Arial;
text-align: center;
}
td {
background-color
How to merge the two blank cells (one above 'Be' and one above 'B') with big blank space in the middle? I tried colspan and rowspan in different ways and still don't know how to do it.
https://i.stack.imgur.com/tw5SE.png
My code:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="ex10.css">
</head>
<body>
<table style="width:800px;">
<tr class="tr1">
<th>I</th>
<th>II</th>
<th>III</th>
<th>IV</th>
<th>V</th>
<th>VI</th>
<th>VII</th>
</tr>
<tr class="tr2">
<td>H</td>
<td class="tr1"></td>
<td colspan="3" rowspan="3"></td>
<td></td>
<td>He</td>
</tr>
<tr>
<td>Li</td>
<td>Be</td>
<td>B</td>
<td>Ne</td>
</tr>
<tr class="tr4">
<td>Na</td>
<td>Mg</td>
<td>Al</td>
<td>Ar</td>
</tr>
<tr class="tr5">
<td>K</td>
<td>Ca</td>
<td>Sc</td>
<td>Ti</td>
<td>V</td>
<td>Ga</td>
<td>Kr</td>
</tr>
</table>
</body>
</html>
CSS:
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
.tr1, th{
color: red;
width: 110px;
}
td{
width: 110px;
height: 54px;
text-align: center;
font-weight: bold;
font-family: Calibri;
}
td:first-child {
background-color: #b4eba8;
}
td:nth-child(2):not(.tr1){
background-color: #76f9fd;
}
td:last-child{
background-color: #fadb47;
}
Structurally you can't... but with css you can do it appear, here's your "only-visual" solution:
https://jsfiddle.net/fe74c5cq/
.bigtd{
border:none;
}
.tdForT
{
border-left:none;
}
.tr1{
border-right:none;
}
take a look at css section, these three classes on the top made the trick (obviously I've put it in the right elements), you should be aware that the border that you see in a natural table, seems to be all "single" borders, but instead, when they are between a cell and another, they are twice!
You see a "single" border because in CSS there's a the property "border-collapse" for table valorized with "collapse" value.
So, when you want to make a border desappear, you must take it away from all adjacent elements.
I have a very stupid problem: I want a field inside a table, which has 100% of the Table-Cell height. The Problem is the IE-Browser, which won't do that. On Chrome etc. it works (Firefox too I think). Here is a sample html-File:
<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Test</title>
<style type="text/css" media="screen">
body {
background-color: #ffffff;
font-size: 12px;
font-family: Verdana, "Verdana CE", Arial, "Arial CE", "Lucida Grande CE", lucida, "Helvetica CE", sans-serif;
color: #000000;
height: 100%;
overflow: hidden;
margin: 0px;
padding: 0px;
border: medium none;
}
table.subTable td {
border-width: 0px;
padding: 0px;
margin: 2px;
}
.ui-slottable table {
height:100%;
width:100%;
}
.ui-slottable-slot {
width:100%;
height: 100%;
border-radius: 5px;
border-width:1px;
border-style:solid;
border-color: #cccccc;
background-color:#eeeeee;
border-collapse: separate;
}
</style>
</head>
<body>
<div class="ui-slottable">
<table>
<tbody>
<tr>
<td>
<div class="ui-slottable-slot">
<table class="subTable" style="margin:2px;">
<tbody>
<tr>
<td>T1 Hallo</td>
</tr>
</tbody>
</table>
</div>
</td>
<td>
<div class="ui-slottable-slot">
<table class="subTable">
<tbody>
<tr>
<td>T2 Hallo</td>
</tr>
<tr>
<td>Halloggggggggggggggggggg</td>
</tr>
</tbody>
</table>
</div>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
In this File The Field T1 should have the same height as T2.
I've tested a lot of different way's, but nothing worked...
Hope someone can tell me how IE makes this...
Attempting to set height usually does not work.
You can get the same height for the fields by using 2 lines in the innermost table for T1, too. (Use nbsp as contents of the extra line.) Then remove the style="margin:2px;" inside the table html tag.
Is there a way Firefox keeps the row height, so if data doesn't fill all the body heigth it keeps an empty space below last row? IE behaves this way, so all rows stay on the top.
I want to code a scroll table with fixed header; sometimes there's not sufficient data on table content to fill the fixed table height.
A sample code:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<link rel="stylesheet" href="reset.css"/>
<style type="text/css">
* {margin:0}
table {
border: solid #66CC99;
border-width: 0px 1px 1px 0px;
width: 400px;
}
th, td {
border: solid #66CC99;
border-width: 1px 0px 0px 1px;
padding: 4px;
}
th {
background-color: #339999;
color: #FFFFFF;
}
tr.alt td {
background-color: #EEEEEE;
}
tbody {
height: 200px;
overflow-y: auto;
overflow-x: hidden;
}
</style>
<!--[if IE]>
<style type="text/css">
div {
position: relative;
height: 200px;
width: 416px;
overflow-y: scroll;
overflow-x: hidden;
border: solid #66CC99;
border-width: 0px 0px 1px 0px;
}
table {
border-width: 1px 1px 0px 0px;
}
thead tr {
position: absolute;
top: expression(this.offsetParent.scrollTop);
}
tbody {
height: auto;
}
table tbody tr:first-child td {
padding: 29px 4px 4px 4px;
}
</style>
<![endif]-->
</head><body>
<table class="treeTable" id="table" cellpadding="0" cellspacing="0" width="100%">
<thead>
<tr>
<th id="col1" class="text" style="width: 100%;" nowrap="nowrap">NAME</th>
<th class="selectable" style="width: 14em;" id="th-122002" nowrap="nowrap">12/2002</th>
<th class="selectable" style="width: 14em;" id="th-122007" nowrap="nowrap">12/2007</th>
<th class="selectable" style="width: 14em;" id="th-072010" nowrap="nowrap">07/2010</th>
</tr>
</thead>
<tbody id="tbody">
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
<tr>
<td>
Name
</td>
<td>
123
</td>
<td>
123
</td>
<td>
123
</td>
</tr>
</tbody>
</table>
</body></html>
One solution that works to a certain extent but doesn't seem perfect is to add this as the last row:
<tr style="height: 100%;"></tr>
It seems to create an empty row that is the size of the area meaning that you can scroll off the bottom til there is only white space which probably isn't ideal. You might be able to play with this a bit (possibly do some rough calculations to work out a sensible height based on how many rows you have) to get a working solution.
Did you specify the height attribute, set it to desired value and then see.
Can you possibly paste your code? I'd also recommend using a reset.css to remove any prejudice different browsers have interpreting your code.
You can set ' ' as a data if there is no value or you can do is set style attribute to your 'td' tag as <td style="height: 15px;"> </td>