Applying CSS to just one table-CodePudding

I want to apply CSS styles to a specific table; I create and populate the table in JavaScript, giving it a classname, but the styles I'm trying to use work if I apply them to all tables, but one of them doesn't work if I apply it to one class.

Here's the code that works: I get a table with collapsed borders:

window.addEventListener("load", () => {
  var tableDataString =
    `[ 
                { "lineNumber": "1-1",
                  "originalLine": "one two three",
                  "currentLine": "One Two Three",
                  "statusLine": "t"
                },
        
                { "lineNumber": "1-2",
                  "originalLine": "four five six",
                  "currentLine": "Four Five Six",
                  "statusLine": "f"
                },
        
                { "lineNumber": "1-3",
                  "originalLine": "seven eight nine",
                  "currentLine": "Seven Eight Nine",
                  "statusLine": "f"
                }
             ]`;

  var tableData = JSON.parse(tableDataString);
  console.log(JSON.stringify(tableData));

  var lineTable = document.createElement("table");
  var row;
  var lineNumberCol;
  var lineTextCol;

  document.getElementById("tableDiv").appendChild(lineTable);
  lineTable.classList.add("lineTableClass");

  for (const rowData of tableData) {
    row = lineTable.insertRow();
    lineNumberCol = row.insertCell();
    lineTextCol = row.insertCell();

    lineNumberCol.innerHTML = rowData["lineNumber"];
    lineTextCol.innerHTML = rowData["currentLine"];
  }

  $(document).on('click', lineTable,
    function(e) {
      alert("e.target.parentElement.rowIndex = "   e.target.parentElement.rowIndex);
    }
  );
});

.lineTableClass table,
.lineTableClass td {
  border-collapse: collapse;
  border-style: solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="tableDiv"></div>

If instead I use table and td without the class designations, then it works as expected.

table,
td {
  border-collapse: collapse;
  border-style: solid
}

It appears that the border-style:solid is applied, but the border-collapse:collapse is not. I've tried various formatting combinations of the CSS; the one illustrated seems to me the least ambiguous, but I have not been able to figure out what its problem is. Why don't these format the page to the same result?

CodePudding user response：

try table.lineTableClass You add the class to the table itself not to the container.

window.addEventListener("load", () => {
  var tableDataString =
    `[ 
                { "lineNumber": "1-1",
                  "originalLine": "one two three",
                  "currentLine": "One Two Three",
                  "statusLine": "t"
                },
        
                { "lineNumber": "1-2",
                  "originalLine": "four five six",
                  "currentLine": "Four Five Six",
                  "statusLine": "f"
                },
        
                { "lineNumber": "1-3",
                  "originalLine": "seven eight nine",
                  "currentLine": "Seven Eight Nine",
                  "statusLine": "f"
                }
             ]`;

  var tableData = JSON.parse(tableDataString);
  console.log(JSON.stringify(tableData));

  var lineTable = document.createElement("table");
  var row;
  var lineNumberCol;
  var lineTextCol;

  document.getElementById("tableDiv").appendChild(lineTable);
  lineTable.classList.add("lineTableClass");

  for (const rowData of tableData) {
    row = lineTable.insertRow();
    lineNumberCol = row.insertCell();
    lineTextCol = row.insertCell();

    lineNumberCol.innerHTML = rowData["lineNumber"];
    lineTextCol.innerHTML = rowData["currentLine"];
  }

  $(document).on('click', lineTable,
    function(e) {
      alert("e.target.parentElement.rowIndex = "   e.target.parentElement.rowIndex);
    }
  );
});

table,
td {
  border-collapse: collapse;
  border-style: solid
}

table.lineTableClass,
td.lineTableClass {
  border-collapse: collapse;
  border-style: solid
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>

<div id="tableDiv"></div>

CodePudding user response：

The actual answer to the original (non-screwed-up) question was that I had not applied the class to the td of the table, only to the table, so the style applied to classes only applied to the table, not the cells in the table, and therefore they didn't get their border.

It was hard, maybe impossible, to determine this from the question after some helpful soul decided that the question HAD to have snippets in it, and screwed up the question while putting the snippets in, deleting text I had put in explaining what a later paragraph meant and making it look like an additional section meant to replace an earlier one was part of the same HTML.

Anyway, now that I'm defining the class for both table and td parts, it is working as expected. Thanks to all of those who were trying to help. Not every question that could take snippets needs them, particularly not if putting them in is going to screw up the question.