HTML positioning data at specific columns left aligned-CodePudding

I would like some help, please, to align data in a table starting at specific columns and aligning to the left.

All data needs to be aligned to the left in the 3 specific columns shown, and should wrap any data that doesn't align.

Please see the current code below.

How can I change this?

I would like the following configured in the Table:

Column 1 to be a maximum of 10 characters.
Column 2 a maximum of 50 characters.
Column 3 a maximum of 10 characters.
All left aligned.
And any data that is inserted beyond the characters above should wrap.

body {
  background-color: powderblue;
}

code {
  background: #2db34a;
  border-radius: 6px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  padding: 24px 15px;
  text-align: center;
}

header,
section,
aside,
footer {
  margin: 0 1.5% 24px 1.5%;
}

section {
  float: left;
  width: 30%;
}

footer {
  clear: both;
  margin-bottom: 0;
}

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
  <tr>
    <th><a href="#">Code</a></th>
    <th><a href="#">Description</a></th>
    <th><a href="#">Quantity</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <th><a href="#">123245</a></th>
    <th><a href="#">This is a description of item 1</a></th>
    <th><a href="#">100</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <th><a href="#">678910111213</a></th>
    <th><a href="#">This is a description of item 2 and it is longer than description 1</a></th>
    <th><a href="#">1000</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
</table>

Thanks in advance for any help provided.

CodePudding user response：

I've added a bit of CSS to make this work:

th {
  text-align: left;
}
tr a {
  display: block;
  word-wrap: break-word;
}
tr th:nth-child(1) a {
  width: 10ch;
}
tr th:nth-child(2) a {
  width: 42ch; // Adjusted 
}
tr th:nth-child(3) a {
  width: 10ch;
}

The ch unit which is based on the 0 glyph width is not perfect, which is why the 50-character limit is actually 42ch in the CSS code.

body {background-color: powderblue;}
code {
  background: #2db34a;
  border-radius: 6px;
  color: #fff;
  display: block;
  font: 14px/24px "Source Code Pro", Inconsolata, "Lucida Console", Terminal, "Courier New", Courier;
  padding: 24px 15px;
  text-align: center;
}
header,
section,
aside,
footer {
  margin: 0 1.5% 24px 1.5%;
}
section {
  float: left;
  width: 30%;
}
footer {
  clear: both;
  margin-bottom: 0;
}

th {
  text-align: left;
}
tr a {
  display: block;
  word-wrap: break-word;
}
tr th:nth-child(1) a {
  width: 10ch;
}
tr th:nth-child(2) a {
  width: 42ch; // Adjusted
}
tr th:nth-child(3) a {
  width: 10ch;
}

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
  <tr>
    <th><a href="#">Code</a></th>
    <th><a href="#">Description</a></th>
    <th><a href="#">Quantity</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <th><a href="#">Thisis10ch</a></th>
    <th><a href="#">This is an easy good nice well 50 character string</a></th>
    <th><a href="#">100</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <th><a href="#">Thisis10ch wrapped</a></th>
    <th><a href="#">This is an easy good nice well 50 character string wrapped</a></th>
    <th><a href="#">1000</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
</table>
</body>
</html>

CodePudding user response：

You may take a look at table-layout and vertical-align properties .

Possible example:

body {
  background-color: powderblue;
}

table {
  table-layout: fixed;
  text-align: left;
  border-spacing:0.5em;
}

tr>* {
  max-width: 10ch;
  word-break: break-all;
  vertical-align:top;
}

tr>*:nth-child(2) {
  max-width: 50ch;
}

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
  <tr>
    <th><a href="#">Code</a></th>
    <th><a href="#">Description</a></th>
    <th><a href="#">Quantity</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <th><a href="#">123245</a></th>
    <th><a href="#">This is a description of item 1</a></th>
    <th><a href="#">100</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
  <tr>
    <th><a href="#">678910111213</a></th>
    <th><a href="#">This is a description of item 2 and it is longer than description 1</a></th>
    <th><a href="#">1000</a></th>
    <th ><a href="#">Item 4</a></th>
  </tr>
</table>

CodePudding user response：

One approach is as follows:

body {
  background-color: powderblue;
}

/* to allow the browser to split words at any point when
   required to allow for a line-break: */
td {
  word-break: break-all;
}

/* selecting any element that is a <th> or a <td> that
   does not match the '.right' selector: */
:is(th, td):not(.right) {
  /* aligning text to the logical inline start,
     in a left-to-right language (such as English)
     that is equivalen to 'text-align: left': */
  text-align: start;
}

/* selecting all <th> and <td> elements that are
   the :first-child, or the :nth-child(3),
   of it's/their parent: */
:is(th, td):is(:first-child, :nth-child(3)) {
  /* there are no CSS sizes exactly equal to '1 character'
     as characters vary enormously in their sizing; the 'ex'
     unit is equal to the width of the lower-case 'x'
     character, which allows for a near-match on average to
     10 characters wide (though ch is another option): */
  max-width: 10ex;
}

/* selecting all <th> and <td> elements that are the second-
   child of their parent: */
:is(th, td):nth-child(2) {
  /* setting the width to 50ex, the width of 50 lowercase 'x'
     characters to approximate a 50 character length: */
  max-width: 50ex;
}

<h1>This is a heading</h1>
<p>This is a paragraph.</p>
<table>
  <thead>
    <tr>
      <th><a href="#">Code</a></th>
      <th><a href="#">Description</a></th>
      <th><a href="#">Quantity</a></th>
      <th ><a href="#">Item 4</a></th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><a href="#">123245</a></td>
      <td><a href="#">This is a description of item 1</a></td>
      <td><a href="#">100</a></td>
      <td ><a href="#">Item 4</a></td>
    </tr>
    <tr>
      <td><a href="#">678910111213</a></td>
      <td><a href="#">This is a description of item 2 and it is longer than description 1</a></td>
      <td><a href="#">1000</a></td>
      <td ><a href="#">Item 4</a></td>
    </tr>
  </tbody>
</table>

References:

CodePudding user response：

You can idea from here and try to learn HTML table. it's a very important thing.

HTML:

<table>
 <thead>
   <tr>
     <th><a href="#">Code</a></th>
     <th><a href="#">Description</a></th>
     <th><a href="#">Quantity</a></th>
     <th><a href="#">Item 4</a></th>
   </tr>
 </thead>
 <tbody>
  <tr>
      <td><a href="#">123245</a>
      <td><a href="#">This is a hello world description of item 1</a></td>
      <td><a href="#">10045467643456457647345456363653</a></td>
      <td><a href="#">Item 4</a></td>    
  </tr>
  <tr>
     <td><a href="#">5463463</a>
     <td><a href="#">Visitors will now see your public and anonymized private 
        contributions.
        Visitors will now see your public and anonymized private contributions.
      </a></td>
      <td><a href="#">1004546764345645764734</a></td>
      <td><a href="#">Hello test 4</a></td>    
  </tr>
 </tbody>
</table>

CSS:

body {
   background-color: powderblue;
}

table * {
   text-align: left;
   word-break: break-all;
}

table thead th:first-child,
 table tbody tr td:first-child {
   width: 50px;
}
table thead th:nth-child(1) {
   width: 200px;
}
table thead th:nth-child(2) {
   width: 200px;
}
table thead th:nth-child(3) {
   width: 200px;
}
table thead th:last-child,
table tbody td:last-child {
   width: 100px;
   text-align: right;
}