Skip to content

Instantly share code, notes, and snippets.

@panoply
Last active May 3, 2024 14:27
Show Gist options
  • Save panoply/176101828af8393adc821e49578ac588 to your computer and use it in GitHub Desktop.
Save panoply/176101828af8393adc821e49578ac588 to your computer and use it in GitHub Desktop.
2 column full width table for github markdown

Equal widths

Github markdown full-width 2 column table.

EXAMPLE TEXT

EXAMPLE TEXT

{
  "foo": [
    {
      "bar": "hello world"
    }
  ]
}
{
  "foo": [
    {
      "bar": "hello world"
    }
  ]
}
Column 1 Column 2

Source

Don't indent the syntax, Github seems to have issues with indentation.

<table>
<tr>
<th align="center">
<img width="441" height="1">
<p> 
<small>
EXAMPLE TEXT
</small>
</p>
</th>
<th align="center">
<img width="441" height="1">
<p> 
<small>
EXAMPLE TEXT
</small>
</p>
</th>
</tr>
<tr>
<td>
<!-- REMOVE THE BACKSLASHES -->
\```jsonc
{
  "foo": [
    {
      "bar": "hello world"
    }
  ]
}
\```
  
</td>
<td>
<!-- REMOVE THE BACKSLASHES -->
\```jsonc
{
  "foo": [
    {
      "bar": "hello world"
    }
  ]
}
\```
  
</td>
</tr>
<tr>
<td align="center">
Column 1
</td>
<td align="center">
Column 2
</td>
</tr>
</table>
@sanghee-dev
Copy link

awesome!

@maximilianMairinger
Copy link

<3

@panoply
Copy link
Author

panoply commented Aug 12, 2022

Update, you can now define width on <th> Example:

API CLI
{
  "input": "source",
  "output": "theme",
  "import": "import",
  "export": "export",
  "config": "."
}
--input  -i <dir>
--output -o <dir>
--config -c <dir>

Code

<!-- prettier-ignore -->
<table>
  <thead>
    <tr>
      <th width="500px"> API</th>
      <th width="500px">CLI</th>
    </tr>
  </thead>
  <tbody>
  <tr width="600px">
      <td>


</td>
<td>


</td>
</tr>

  </tbody>
</table>

@Xunnamius
Copy link

Thanks for the update!

@gensart-x
Copy link

Thanks for sharing, it helped my README to be more good. 💖

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment