We have the ability to craft a personalized counter-style that eliminates the trailing space found in the default counter-style: numeric.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: custom-style;
}
ul {
list-style: disc;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
@counter-style custom-style {
/* These lines essentially mimic the `counter-style: numeric` */
system: numeric;
symbols: "0" "1" "2" "3" "4" "5" "6" "7" "8" "9";
/* This comes after the number */
suffix: ".";
/* The default `numeric` style is like */
/* suffix: ". "; */
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Other options for slightly varied outcomes:
Option 1: Append spacing to the right of the bullet manually
The concept is to ensure all list styles possess equal prefix lengths, which will align them when using a monospaced font.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: decimal;
}
ul {
list-style: custom-style;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
@counter-style custom-style {
system: cyclic;
symbols: "•";
suffix: " ";
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Option 2: Only apply monospacing to the text (bypassing the bullets)
This approach ensures the list-style (::marker) sections of the elements appear the same as they did in the initial non-monospaced example.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
table {
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
span {
font-family: monospace;
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li><span>Hello</span></li>
<li><span>World</span></li>
</ol>
<ul>
<li><span>Hello</span></li>
<li><span>World</span></li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>
Option 3: Apply list-style-position: inside
This aligns the beginnings but not the actual text itself.
ul,
ol {
margin-top: 10px;
margin-bottom: 0;
padding: 0 0 0 1.4em;
font-size: 15px;
line-height: 24px;
list-style: none;
list-style-position: inside;
}
ol {
list-style-type: decimal;
}
ul {
list-style-type: disc;
}
table {
font-family: monospace;
width: 100%;
table-layout: fixed;
border-spacing: 0;
border-collapse: collapse;
td {
position: relative;
min-width: 137px;
padding: 7px 6px;
border: 1px solid #ccc;
line-height: 20px;
}
}
<div contenteditable="true">
<table>
<tr>
<td>
<ol>
<li>Hello</li>
<li>World</li>
</ol>
<ul>
<li>Hello</li>
<li>World</li>
</ul>
</td>
<td>Another cell</td>
</tr>
</table>
</div>