Any way to keep table columns at a fixed with to other tables?

I'm working on an overclocking guide for my PC and trying to keep my table columns consistent. See image:

I know about the div hack by inserting <div style="width: 266px;">Heading Name</div> around the heading in the markdown editor, but it still doesn't line up even with all headers set to the same width value.

Do I have to just live with it, or is there another way? Any tweaks in userstyle.css I can make?

Thanks for any help.

Yes, there is a way to have the columns in the tables to be equal and all across the page.

I'm on my cell phone right now I'm going to save this and post it and then edit it in a few minutes from my Windows computer. There is a file in your profile directory that you can create and edit if it doesn't exist that will help you do what you want.

In this case, adding the following to your userstyle.css will select the tables and make them take up 100% of the width of the renderer:

.mce-item-table {
width: 100%;
}

You can find the userstyle.css files by clicking Help > Open Profile Directory* in Joplin, they're just text files you can open in any text editor to change. You'll need to quit out and restart Joplin for the changes to take effect though.

If the file does NOT exist, you need to simply create it, and put the text above in the file.

Exit and restart Joplin.

Sorry, not what I meant. I already have all my tables at 100%. Look at my screenshot.

What I WANT, is a way to make sure all column widths across all my tables are exactly the same.

Original from Joplin:

What I want my table to look like:

Pay attention to the column widths.

Hope this clarifies!

Ok, i see now.

What you are asking is not simple unfortunately but I will investigate and see if I can figure out a way to help you make this work.

Markdown format constraints are the issue.

I'm not an expert on actually doing this, but if you can understand this data I found perhaps you'll achieve what you want.

In Joplin, you can adjust the width of columns and have different widths for different columns by using HTML within your Markdown tables. Here's how you can do it:

  1. Use HTML style attribute: You can specify the width of each column using the style attribute within the <th> or <td> tags. For example:
<table>
  <tr>
    <th style="width: 150px;">Column 1</th>
    <th style="width: 100px;">Column 2</th>
    <th style="width: 200px;">Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>
  1. Use CSS: You can also define a CSS style block within your Markdown to control the table's appearance. For example:
<style>
  .custom-table th:nth-child(1) { width: 150px; }
  .custom-table th:nth-child(2) { width: 100px; }
  .custom-table th:nth-child(3) { width: 200px; }
</style>

<table class="custom-table">
  <tr>
    <th>Column 1</th>
    <th>Column 2</th>
    <th>Column 3</th>
  </tr>
  <tr>
    <td>Data 1</td>
    <td>Data 2</td>
    <td>Data 3</td>
  </tr>
</table>

These methods allow you to have precise control over the width of each column in your tables.

The table you WANT has column 1 being wider than column 2,3, and 4.
Empty columns seem to want to be smaller until they contain data.
This table will be equal when all columns have data.

I have been trying to test a variety of supposed Solutions on the internet, but markdown unfortunately doesn't naturally or natively provide for what you want.

I will try some more tomorrow.

@fmotion1

Here is a solution that might be a suitable workaround for you. If you designate the very first row or the very last row as a space control row you put a series of dots or dashes in each column so that you don't have any columns that are blank in every single row. With one row filled in all of the columns will be the same size all of the time.

OR Add Headers to the empty columns.

See picture: