I'm extremely new to coding so forgive if this is a basic question; however, I need a little direction and hope someone is able to provide an answer.
I'm reading an article pertaining to the alignment of numerical data to a decimal point within a table https://alistapart.com/article/web-typography-tables/#section6
which uses the below declaration for example:
td { text-align: "." center; }
Below is the basic table code I'm testing the syntax on.
<!-- HTML CODE -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>
<table>
<caption>
October Expenses
</caption>
<colgroup>
<col style="text-align: right" />
</colgroup>
<thead>
<tr>
<th>Date</th>
<th>Expense</th>
<th>Cost</th>
<th>Payment Method</th>
</tr>
</thead>
<tbody>
<tr>
<td scope="col">01.10.21</td>
<td scope="col">75" Samsung tv.</td>
<td scope="col">$1,995.00</td>
<td scope="col">Zip</td>
</tr>
<tr>
<td>07.10.21</td>
<td>Netflix</td>
<td>$15.99</td>
<td>Debit</td>
</tr>
<tr>
<td>12.10.21</td>
<td>Paint Supplies</td>
<td>$102.14</td>
<td>Debit</td>
</tr>
<tr>
<td>18.10.21</td>
<td>Pencil</td>
<td>$0.80</td>
<td>Debit</td>
</tr>
<tr>
<th colspan="2" style="text-align: right">Total</th>
<td colspan="2" style="text-align: left">$2,113.93</td>
</tr>
</tbody>
</table>
</body>
</html>
/* CSS */
caption {
font-size: 1.3rem;
font-weight: bold;
padding-bottom: 10px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 1%;
}
thead th:nth-child(n) {
width: 20%;
}
tbody tr:nth-child(even) {
background-color: #adc2a9;
}
tbody tr:nth-child(odd) {
background-color: #d3e4cd;
}
thead th:nth-child(1) {
text-align: right;
}
thead th:nth-child(2) {
text-align: left;
}
thead th:nth-child(3) {
text-align: center;
}
thead th:nth-child(4) {
text-align: left;
}
tbody td:nth-child(1) {
text-align: right;
}
tbody td:nth-child(3) {
text-align: center;
}
caption {
font-size: 1.3rem;
font-weight: bold;
padding-bottom: 10px;
}
table,
th,
td {
border: 1px solid black;
border-collapse: collapse;
padding: 1%;
}
thead th:nth-child(n) {
width: 20%;
}
tbody tr:nth-child(even) {
background-color: #adc2a9;
}
tbody tr:nth-child(odd) {
background-color: #d3e4cd;
}
thead th:nth-child(1) {
text-align: right;
}
thead th:nth-child(2) {
text-align: left;
}
thead th:nth-child(3) {
text-align: center;
}
thead th:nth-child(4) {
text-align: left;
}
tbody td:nth-child(1) {
text-align: right;
}
tbody td:nth-child(3) {
text-align: "." center;
}
However, when I employ this code within my <td> elements located on separate rows and contain various decimal placed numbers, the output doesn't appear to line up the periods directly beneath each other. I have the text-aligned to center to test this . syntax (I understand numbers should be styled to text-align: right;)
Am I misinterpreting the function of this syntax? Am I not doing something correctly? or does this syntax simply not work?
Related
Problem
i've to do a little html email just for test. The problem is that right now i cannot reset all the space between this 5 tds.
I need them in the center of the table.
Tries
I already tried, as suggested in many posts:
border spacing
border collapse
reset all in css ( html, body, p etc )
display: inline-table
display: inline-block
This is only the interested row of a bigger table, the other rows works perfectly.
i don't know what i could try to fix this.
Expectation
five square near to each other in the center of the
Code
<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
<tr>
<td>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
<tr>
<tr>
<td>
<table width="600px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
<tr>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
</td>
</tr>
</table>
CSS RESET
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 none !important;
display: block;
height: auto;
line-height: 100%;
outline: none !important;
text-decoration: none;
}
a img {
border: 0 none;
}
table, td {
border-collapse: collapse;
border: 0 none;
}
td, a, span {
mso-line-height-rule: exactly;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
#bodyTable{
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
In the Html, your table width is 600px. Try 300px for centering them.
body {
margin: 0;
padding: 0;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
img {
border: 0 none !important;
display: block;
height: auto;
line-height: 100%;
outline: none !important;
text-decoration: none;
}
a img {
border: 0 none;
}
table,
td {
border-collapse: collapse;
border: 0 none;
}
td,
a,
span {
mso-line-height-rule: exactly;
}
p {
Margin: 0px !important;
Padding: 0px !important;
}
#bodyTable {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
-webkit-text-size-adjust: 100% !important;
-ms-text-size-adjust: 100% !important;
-webkit-font-smoothing: antialiased !important;
}
<table id="bodyTable" width="100%" bgcolor="#efefef" border="0" cellspacing="0" cellpadding="0" style="margin: 0 auto; font-family: Museo, Helvetica, Arial, sans-serif">
<tr>
<td>
<table align="center" border="0" cellspacing="0" cellpadding="0" style="max-width: 600px">
<tr>
<tr>
<td>
<table width="300px" border="0" cellspacing="0" cellpadding="0" bgcolor="#efefef">
<tr>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/y48sqQs/Goglueplus-Logo.png" alt="twitterButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px;" src="https://i.ibb.co/m5nZrrg/facebook-Mini-Button.png" alt="facebookButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/cxLcQcQ/Instagram-Logo.png" alt="googlePlusButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/rxT4vzx/Linkedin-Button.png" alt="linkedinButton">
</td>
<td align="center">
<img style="height: 30px; padding: 10px" src="https://i.ibb.co/3FCYZ4z/twitter-Button.png" alt="instagramButton">
</td>
</tr>
</table>
</td>
</tr>
</tr>
</table>
This shows the working jfiddle (Click the color-picker)
http://jsfiddle.net/xztoqtd7/
This shows the non-working jfiddle (Click the color-picker)
http://jsfiddle.net/p7dm051z/
They should both change the color of the second row cells, but only one of them does that. Code:
HTML
<table>
<tr>
<td>
<input type="color" id="colorpicker1" />
</td>
<td>
<input type="color" id="colorpicker2" />
</td>
</tr>
<tr>
<td id="one">ipsum</td>
<td id="two">lorem</td>
</tr>
</table>
CSS
table {
border-collapse: collapse;
background: #000;
border-top: 1px solid #777;
border-left: 1px solid #777;
}
table tr td {
border-right: 1px solid #777;
border-bottom: 1px solid #777;
color: #fff;
text-align: center;
}
input {
border: 0;
padding: 0;
margin: 0;
}
JS
$("#colorpicker1").on("change", function() {
$("#one").css("color", $("#colorpicker1").val());
});
$("#colorpicker2").on("change", function() {
$("#two").css("color", $("#colorpicker2").val());
});
Why is the result different?
When I try to set a padding it's not center anymore. It moves to the other side.
How can I set padding of the textbox input so that it's still aligned center?
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>
You can try adding
.textbox {
box-sizing: border-box;
}
table {
text-align: right;
}
#textfield {
float: left;
}
.textbox {
font-family: Arial, Helvetica, sans-serif;
background: rgba(255, 255, 255, 0.44);
color: #333;
border: 1px solid #A4A4A4;
padding-left: 5px;
line-height: 1;
width: 225px;
height: 18px;
border-spacing: 8px;
box-sizing: border-box;
}
<table width="450" border="1" cellspacing="3" cellpadding="3">
<tbody>
<tr>
<td width="225"><label>First Name:</label></td>
<td width="225">
<input class="textbox" type="text" name="textfield" id="textfield">
</td>
</tr>
</tbody>
</table>
I'm building a site that includes a table in the middle of the homepage, and I can't seem to get a line (looks like an <hr> line) to disappear from the top of it. Here's a link to the page http://marccary.com/test and here's the code I'm using for the table:
<table cellspacing="0" cellpadding="0" border="none">
<colgroup border="none">
<col span="1" width="400" >
<col span="1" width="400" >
</colgroup>
<tr>
<td height="225" width="600"><p align="center">
<iframe width="400" height="166" scrolling="no" frameborder="no" src="http://w.soundcloud.com/player/?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F84936057%3Fsecret_token%3Ds-4zQJw&show_artwork=true&secret_url=true"></iframe><br><span style="font-size:20px;">Marc Cary on Soundcloud>></span></p></td>
<td height="225" width="600"><p align="center">
<iframe width="400" height="225" src="http://www.youtube.com/embed/j9GhIaaEC6c" frameborder="0" allowfullscreen></iframe>
<span style="font-size:20px;">Marc Cary's YouTube channel>></savaipan></p></td></tr></table>
I've gone into my CSS and tried to make sure there are no borders on tables. I've put the following code into my CSS stylesheet:
table {
border-collapse: separate;
border-spacing: 0;
border: none !important;
border-top: none;
border-bottom: none;
}
caption,
th {
border-bottom: none;
border: none;
border-top: none;
}
td {
font-weight: normal;
text-align: left;
border-top: none;
border: none;
border-bottom: none;
}
tr {
border: none;
border-bottom: none;
border-top: none;
}
Still no luck. Does anyone have a suggestion?
You have a CSS setting:
.entry-content td, .comment-content td {
border-top: 1px solid #EDEDED;
}
Thats the border you see.
This CSS
border-top: none;
border: none;
border-bottom: none;
can be shortened to just
border: none;
Add the following to your CSS:
hr {
height: 0px !important;
}
It seems you're using a CMS software to develop your site and the template you're using is actually putting an <hr> at
<div id="page" ...>
<header id="masthead" ...>
<hgroup ...>
<nav id="site-navigation" ...>
<hr>
</header>
<div id="main" ...>
<footer ...>
</div>
For a service with webHttpBinding and helpEnabled="true", the help information is getting generated properly. Was wondering if it is possible to control the output somehow. Below are the changes I would like to make.
Remove the JSON help as the service doesn't support JSON output. Having it there might be confusing to users. At least, have a way to output a note saying JSON is not supported.
For the example replies shown, use a better example than "String content" where actual value samples can be specified. Would be good if I can supply the object that is used for being serialized as example.
The help page for WCF WebHttp endpoints cannot be customized. You can, however, replace it with your own custom page. It's easy to be implemented, but it's a lot of code to write. The example below shows how this can be done for a simple service.
public class StackOverflow_7005187
{
[DataContract]
public class MyDC
{
[DataMember]
public string str = "The string";
}
[ServiceContract]
public interface ITest
{
[WebInvoke]
string EchoString(string text);
[WebGet]
int Add(int x, int y);
[WebInvoke]
MyDC EchoDC(MyDC input);
[WebGet(UriTemplate = "/help")]
Message GetMainHelpPage();
[WebGet(UriTemplate = "/help/operations/EchoDC")]
Message GetOperationsEchoDCHelpPage();
// help for other operations not implemented
}
public class Service : ITest
{
public string EchoString(string text)
{
return text;
}
public int Add(int x, int y)
{
return x + y;
}
public MyDC EchoDC(MyDC input)
{
return input;
}
public Message GetMainHelpPage()
{
string page = #"<!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>
<title>Operations at http://localhost:8000/Service</title>
<style>BODY { color: #000000; background-color: white; font-family: Verdana; margin-left: 0px; margin-top: 0px; } #content { margin-left: 30px; font-size: .70em; padding-bottom: 2em; } A:link { color: #336699; font-weight: bold; text-decoration: underline; } A:visited { color: #6699cc; font-weight: bold; text-decoration: underline; } A:active { color: #336699; font-weight: bold; text-decoration: underline; } .heading1 { background-color: #003366; border-bottom: #336699 6px solid; color: #ffffff; font-family: Tahoma; font-size: 26px; font-weight: normal;margin: 0em 0em 10px -20px; padding-bottom: 8px; padding-left: 30px;padding-top: 16px;} pre { font-size:small; background-color: #e5e5cc; padding: 5px; font-family: Courier New; margin-top: 0px; border: 1px #f0f0e0 solid; white-space: pre-wrap; white-space: -pre-wrap; word-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0px; font-family: Verdana;} table th { border-right: 2px white solid; border-bottom: 2px white solid; font-weight: bold; background-color: #cecf9c;} table td { border-right: 2px white solid; border-bottom: 2px white solid; background-color: #e5e5cc;}</style>
</head>
<body>
<div id=""content"">
<p class=""heading1"">Operations at http://localhost:8000/Service</p>
<p>This page describes the service operations at this endpoint.</p>
<table>
<tr>
<th>Uri</th>
<th>Method</th>
<th>Description</th>
</tr>
<tr>
<td>Add</td>
<td title=""http://localhost:8000/Service/Add?x={X}&y={Y}"">
<a rel=""operation"" href=""help/operations/Add"">GET</a>
</td>
<td>Service at http://localhost:8000/Service/Add?x={X}&y={Y}</td>
</tr>
<tr>
<td>EchoDC</td>
<td title=""http://localhost:8000/Service/EchoDC"">
<a rel=""operation"" href=""help/operations/EchoDC"">POST</a>
</td>
<td>Service at http://localhost:8000/Service/EchoDC</td>
</tr>
<tr>
<td>EchoString</td>
<td title=""http://localhost:8000/Service/EchoString"">
<a rel=""operation"" href=""help/operations/EchoString"">POST</a>
</td>
<td>Service at http://localhost:8000/Service/EchoString</td>
</tr>
</table>
</div>
</body>
</html>";
return WebOperationContext.Current.CreateStreamResponse(
new MemoryStream(Encoding.UTF8.GetBytes(page)),
"text/html");
}
public Message GetOperationsEchoDCHelpPage()
{
string page = #"<!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>
<title>Reference for http://localhost:8000/Service/EchoDC</title>
<style>BODY { color: #000000; background-color: white; font-family: Verdana; margin-left: 0px; margin-top: 0px; } #content { margin-left: 30px; font-size: .70em; padding-bottom: 2em; } A:link { color: #336699; font-weight: bold; text-decoration: underline; } A:visited { color: #6699cc; font-weight: bold; text-decoration: underline; } A:active { color: #336699; font-weight: bold; text-decoration: underline; } .heading1 { background-color: #003366; border-bottom: #336699 6px solid; color: #ffffff; font-family: Tahoma; font-size: 26px; font-weight: normal;margin: 0em 0em 10px -20px; padding-bottom: 8px; padding-left: 30px;padding-top: 16px;} pre { font-size:small; background-color: #e5e5cc; padding: 5px; font-family: Courier New; margin-top: 0px; border: 1px #f0f0e0 solid; white-space: pre-wrap; white-space: -pre-wrap; word-wrap: break-word; } table { border-collapse: collapse; border-spacing: 0px; font-family: Verdana;} table th { border-right: 2px white solid; border-bottom: 2px white solid; font-weight: bold; background-color: #cecf9c;} table td { border-right: 2px white solid; border-bottom: 2px white solid; background-color: #e5e5cc;}</style>
</head>
<body>
<div id=""content"">
<p class=""heading1"">Reference for http://localhost:8000/Service/EchoDC</p>
<p></p>
<p xmlns=""http://www.w3.org/1999/xhtml"">
<b>Url: </b>
<span class=""uri-template"">http://localhost:8000/Service/EchoDC</span>
</p>
<p xmlns=""http://www.w3.org/1999/xhtml"">
<b>HTTP Method: </b>
<span class=""method"">POST</span>
</p>
<table>
<tr>
<th>Message direction</th>
<th>Format</th>
<th>Body</th>
</tr>
<tr>
<td>Request</td>
<td>Xml</td>
<td>
Example</td>
</tr>
<tr>
<td>Request</td>
<td>Json</td>
<td>
Example
</td>
</tr>
<tr>
<td>Response</td>
<td>Xml</td>
<td>
Example</td>
</tr>
</table>
<p>
<a name=""#request-xml"">The following is an example request Xml body:</a>
<pre class=""request-xml""><StackOverflow_7005187.MyDC xmlns=""http://schemas.datacontract.org/2004/07/WcfForums"">
<str>This is a modified string content</str>
</StackOverflow_7005187.MyDC></pre>
</p>
<p>
<a name=""#request-json"">The following is an example request Json body:</a>
<pre class=""request-json"">{
""str"":""Some content in JSON""
}</pre>
</p>
<p>
<a name=""#response-xml"">The following is an example response Xml body:</a>
<pre class=""response-xml""><StackOverflow_7005187.MyDC xmlns=""http://schemas.datacontract.org/2004/07/WcfForums"">
<str>Another modified XML content</str>
</StackOverflow_7005187.MyDC></pre>
</p>
</div>
</body>
</html>";
return WebOperationContext.Current.CreateStreamResponse(
new MemoryStream(Encoding.UTF8.GetBytes(page)),
"text/html");
}
}
public static void Test()
{
string baseAddress = "http://" + Environment.MachineName + ":8000/Service";
ServiceHost host = new ServiceHost(typeof(Service), new Uri(baseAddress));
host.AddServiceEndpoint(typeof(ITest), new WebHttpBinding(), "").Behaviors.Add(new WebHttpBehavior { HelpEnabled = false });
host.Open();
Console.WriteLine("Host opened");
Console.Write("Press ENTER to close the host");
Console.ReadLine();
host.Close();
}
}