How to center and right align table in javscript

JavaScript
1

Hey can anyone help me fix this issue I have been struggling for two weeks. Thanks in advance

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

The code must be created in JavaScript

<table id="card" width="827" height="545" border="1">
  <tr>
    <td width="42">Bread </td>
    <td width="52">Chips</td>
    <td width="60">Choclates</td>
  </tr>
  <tr>
    <td class="firsttable">12</td>
    <td class="firsttable">Simba Chips</td>
    <td class="firsttable">4</td>
  </tr>
  <tr>
    <td class="firsttable">12</td>
    <td class="firsttable">Lays Chips</td>
    <td class="firsttable">12</td>
  </tr>
  <tr>
    <td class="firsttable">12</td>
    <td class="firsttable">Nik Naks Chips</td>
    <td class="firsttable">12</td>
  </tr>
</table>

<script type="text/javascript">

var str 
var n = str.length;
var load = require('styles');
module.exports = function loadStyles(doc) {
  if (n =< 5) 
var css = ".my-class-name .color {\n text-align: center;\n}\n\n.my-class-name span i {\n  text-align: center;\n}";
else 
var css = ".my-class-name .color {\n  text-align: center;\n}\n\n.my-class-name span i {\n  text-align: center;\n}";
  return load(css, doc);
};

</script>

Im getting a error

859×570 26.1 KB

2

Hi there angularjs

here is one possible solution…

<!DOCTYPE html>
<html lang="en">
<head>

<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=document.getElementById('card').getElementsByTagName('td');
  for(var c=0;c<td.length;c++) {
    if (td[c].textContent.length<=5) {
        td[c].style.textAlign='center';
      }
    }
}());
</script>

</body>
</html>

coothead

2 Likes
3

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