How to make table columns with the same width in GitHub markdown?

Question

I'm trying to make table with two identical screenshots, but the right column is wider then left one. Moreover, it depends on text in the row below, but I don't clearly understand, how it depends exactly.

Two simple examples:

![img](https://raw.githubusercontent.com/hant0508/tmp/master/1.png) | ![img](https://raw.githubusercontent.com/hant0508/tmp/master/1.png)
:---:|:---:
Usage on GNOME 3 | Drag-and-drop on GNOME 3

![img](https://raw.githubusercontent.com/hant0508/tmp/master/1.png) | ![img](https://raw.githubusercontent.com/hant0508/tmp/master/1.png)
:---:|:---:
Usage on GNOME 3 | Drag and drop on GNOME 3

The same text length, the same words... What's wrong with hyphens and how can I fix it?

Was this in a Wiki, or markdown document? Having trouble reproducing this. — BrechtDeMan
– BrechtDeMan, Commented Aug 5, 2016 at 11:56
I think the hyphens make a difference since they make "Drag-and-drop" the widest non-breakable word, thus making the cell's min-content with bigger than if "GNOME" is the widest word. — Joseph Marinier
– Joseph Marinier, Commented Nov 25, 2022 at 18:57

BrechtDeMan · Accepted Answer · 2016-08-05 11:55:40Z

1

If the only difference is truly the hyphen, try a different type of hyphen (e.g. an 'actual' hyphen, instead of the minus sign: http://unicode-table.com/en/2010/).

I should say I cannot reproduce this exactly. The images in my example (left vs. right) are about a pixel or so different, not as much as yours:

answered Aug 5, 2016 at 11:55

BrechtDeMan

6,9624 gold badges26 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Oskar Asplin · Accepted Answer · 2022-12-04 15:50:25Z

1

I had this same issue and was only able to solve it with html. You can add html code directly into the markdown file:

<table width="100%">
  <thead>
    <tr>
      <th width="50%">First header</th>
      <th width="50%">Second header long</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td width="50%"><img src="https://docs.github.com/assets/cb-194149/images/help/images/view.png"/></td>
      <td width="50%"><img src="https://docs.github.com/assets/cb-194149/images/help/images/view.png"/></td>
    </tr>
  </tbody>
</table>

answered Dec 4, 2022 at 15:50

Oskar Asplin

312 bronze badges

1 Comment

squarefrog Over a year ago

This is the simplest solution, and works for GitLab too!

Collectives™ on Stack Overflow

How to make table columns with the same width in GitHub markdown?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related