How to center and right align table in jquery

Hey can anyone help me fix this issue I have been struggling.

If string is =< 5 characters display center align else display left align

The code must be created in Jquery somehow my code is not correct can anyone tell me rectify my problem.
Thanks in advance

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#card {
    width: 100%;
    max-width: 51.5em;
    margin:auto;
    border: 0.125em outset  #808080;
  }
#card th, #card td {
    padding: 2.5em 0.5em;
    border: 0.06em inset  #808080;
    text-align: left;
}
</style>
</head>
<body> 
<table id="card">
  <tr>
    <th>Bread </th>
    <th>Chips</th>
    <th>Choclates</th>
  </tr>
  <tr>
    <td>12</td>
    <td>Simba Chips</td>
    <td>4</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Lays Chips</td>
    <td>12</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Nik Naks Chips</td>
    <td>12</td>
  </tr>
</table>
<script>
(function() {
   'use strict';
   var td=$('card').$('td');
  for(var c=0;c<td.length;c++) {
    if (td[c].textContent.length<=5) {
        td[c].style.textAlign='center';
      }
    }
}());
</script>
</body>
</html>

that doesn’t make sense, why would the same type of info be formatted differently?

if you want the numbers centered and the text left aligned, that would be a different matter, which you can solve by assigning classes or defining the alignment per column (using the nth-child pseudo-class)

Initially all code is created in the js file this is just an example i dont have access to the html file it gets created in the js file

Where did you see that the syntax can be like this?

var td=$('card').$('td');

Wouldn’t it be more like

var td=$('card td');

But if you aren’t getting error messages in your console maybe that’s not the problem.

You missed the hash :slight_smile:

var td=$('#card td');

his works for me.

<!DOCTYPE HTML>
<html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<title>untitled document</title>
<!--<link rel="stylesheet" href="screen.css" media="screen">-->
<style media="screen">
#card {
    width: 100%;
    max-width: 51.5em;
    margin:auto;
    border: 0.125em outset  #808080;
  }
#card th, #card td {
    padding: 2.5em 0.5em;
    border: 0.06em inset  #808080;
    text-align: left;
}
</style>
</head>
<body> 
<table id="card">
  <tr>
    <th>Bread </th>
    <th>Chips</th>
    <th>Choclates</th>
  </tr>
  <tr>
    <td>12</td>
    <td>Simba Chips</td>
    <td>4</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Lays Chips</td>
    <td>12</td>
  </tr>
  <tr>
    <td>12</td>
    <td>Nik Naks Chips</td>
    <td>12</td>
  </tr>
</table>
<script
      src="https://code.jquery.com/jquery-2.2.4.min.js"
      integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44="
      crossorigin="anonymous"></script>

<script>
(function() {
   'use strict';
   var td=$('#card td');
  for(var c=0;c<td.length;c++) {
    if (td[c].textContent.length<=5) {
        td[c].style.textAlign='center';
      }
    }
}());
</script>
</body>
</html>
1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.