View Single Post
Old 07-18-2022, 01:09 PM   #2
enuddleyarbl
Guru
enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.enuddleyarbl ought to be getting tired of karma fortunes by now.
 
enuddleyarbl's Avatar
 
Posts: 778
Karma: 1538394
Join Date: Sep 2013
Device: Kobo Forma
Just a follow-up. After doing more research, I found that I could assign IDs to the tables and use those with # to apply the styles/classes to particular tables. I think I've got it working. The HTML for the table definitions used to look like:
Code:
    <table cellpadding="4" cellspacing="0" style="width:100%" class="calibre18">
        <colgroup class="calibre19">
            <col style="width:50%" class="calibre20"/>
            <col style="width:50%" class="calibre20"/>
        </colgroup>
        <tbody class="calibre21">
            <tr class="calibre22">
                <td class="calibre23">
...
Now, they look like this:
Code:
    <table id="an3819">
      <colgroup>
        <col/>
        <col/>
      </colgroup>
      <tbody>
        <tr>
          <td>
...
My table classes in stylesheet.css look like:
Code:
table#an1111, table#an2315, table#an3477, table#an3819, table#an3988 {
  table-layout: fixed;
  width: 100%;
  border-spacing: 0;
  border: 1px black solid;
}
td {
  border-collapse: collapse;
}
table#an1111 td, table#an3477 td, table#an3988 td {
  width: 50%;
  border: 0;
  padding: 1px;
  vertical-align: top;
}
table#an2315 td {
  width: 50%;
  border: 0;
  padding: 0;
  vertical-align: top;
}
table#an3017 {
  table-layout: fixed;
  width: 100%;
  border-spacing: 5px;
  border: 1px black solid;
}
table#an3017 td {
  width: 50%;
  border: 0;
  padding: 5px;
  vertical-align: top;
}
td {
  border-collapse: separate;
}
table#an3819 td {
  width: 50%;
  border: 0;
  padding: 4px;
  vertical-align: top;
}
Personally, since the difference between cellpadding/cellspacing of 1/0, 4/0 and 5/5 are so minor, I'm heavily considering just making all the classes the same. Also, with these settings (much of which I grabbed from the classes that used to be associated with the table elements), I don't see any difference between border-collapse: separate and collapse.
enuddleyarbl is offline   Reply With Quote