How can I efficiently center-align some columns while left-align others?
I want to do something like this.
-------------------------
| A |B |
-------------------------
| C |D |
-------------------------
This code makes all columns centered.
{| class="wikitable" style="text-align: center;"
|-
! Header 1
! Header 2
|-
| A
| B
|-
| C
| D
|}
And I know the following code does what I want.
{| class="wikitable"
|-
! Header 1
! Header 2
|-
| style="text-align: center;" | A
| B
|-
| style="text-align: center;" | C
| D
|}
But since I need to make a quite lenghty table, this is tedious.
Is there any code that will center-align only the 1st column using a very simple one line of code?
The accepted answer, while correct, can be tedious to implement generally, as you need to create a distinct CSS class for every combination of column position and text alignment that you need.
An alternative approach for one-offs is to embed CSS directly into the wiki page. On wikis that are only edited by trusted users, you can enable $wgRawHtml. On others, you can use an extension such as Extension:CSS. If you have multiple tables, you can restrict the styling to each table by using #id selectors.
<html> <!-- assumes $wgRawHtml = true; safer alternatives exist -->
<style>
table#accounts tr td:nth-child(3),
table#accounts tr td:nth-child(4)
{
text-align: right;
}
</style>
</html>
{| class="wikitable" id="accounts"
! Account Number !! Account Name !! Source Balance !! Target Balance
|-
| 1234 || UK Savings || 402.00 || 323.21
|-
| 5432 || Car Fund || 12,943.00 || 23,433.21
|-
| 6789 || Other Expenses || 4.21 || 6.21
|}
Edit: On second thoughts, going with a global approach does result in cleaner syntax within the wiki pages, especially if you have many tables with columns to align. I've created CSS classes for each alignment in the MediaWiki:Common.css page:
table.col-1-center td:nth-child(1) { text-align: center; }
table.col-2-center td:nth-child(2) { text-align: center; }
table.col-3-center td:nth-child(3) { text-align: center; }
table.col-4-center td:nth-child(4) { text-align: center; }
table.col-5-center td:nth-child(5) { text-align: center; }
table.col-6-center td:nth-child(6) { text-align: center; }
table.col-7-center td:nth-child(7) { text-align: center; }
table.col-8-center td:nth-child(8) { text-align: center; }
table.col-9-center td:nth-child(9) { text-align: center; }
table.col-1-right td:nth-child(1) { text-align: right; }
table.col-2-right td:nth-child(2) { text-align: right; }
table.col-3-right td:nth-child(3) { text-align: right; }
table.col-4-right td:nth-child(4) { text-align: right; }
table.col-5-right td:nth-child(5) { text-align: right; }
table.col-6-right td:nth-child(6) { text-align: right; }
table.col-7-right td:nth-child(7) { text-align: right; }
table.col-8-right td:nth-child(8) { text-align: right; }
table.col-9-right td:nth-child(9) { text-align: right; }
Then, within your wiki pages, you can simply reference the CSS class:
{| class="wikitable col-3-right col-4-right"
! Account Number !! Account Name !! Source Balance !! Target Balance
|-
| 1234 || UK Savings || 402.00 || 323.21
|-
| 5432 || Car Fund || 12,943.00 || 23,433.21
|-
| 6789 || Other Expenses || 4.21 || 6.21
|}
The added advantage of this approach is that you don't need to enable $wgRawHtml or install extensions.
Unless you disabled it in LocalSettings.php, you can use the page MediaWiki:Common.css to add extra stylesheets to all pages. Just do what you need there, using plain CSS. E.g:
.myTableClass td {
text-align: left;
}
.myTableClass td:first-child {
text-align: center;
}
...and then add that class to your tables
{| class="wikitable myTableClass"
|-
| A
| B
|-
| C
| D
|}
Related
Markdown file
---
title: 'Testing Second Blog Post'
date: 'May 2 2022'
excerpt: 'This is the excerpt'
cover_image: '/images/posts/test.jpeg'
---
# Basics of Markdown
Markdown is the most popular markup language that can be used to format documents. It can be used to create _websites_,_ebooks_,_email_,_chats in discussions forums_.
## Topics
1. Paragraphs
MD expects a full line space to show texts in a different line else it joins text in the same line.
2. Text decorations
MD can write **bold** texts, ~~italiic~~ _italic_ texts
3. Headings
No of #'s represent the type of heading. Github will automatically add id's to headings, so the text will be automatically linked.
## This is h2
### This is h3
4. Links
[My Github](https://github.com/bhupendra1011 'all repos') account.[Bhupendra][1] github repo.
5. Images
Images can be used just like links. 
Thumbnails images can also be used which links to larger image
[<img src="http://placekitten.com/20/20">](http://placekitten.com/200/200)
6. Ordered and Unordered Lists
Coding Best Practices:
- Keep code DRY
- Writing Unit Test cases
- Checking cross-browser support
Steps to merge branch:
1. Create a branch from feature
1. commit your changes
1. push your changes
1. raise a pull request
7. Code Blocks
This is super helpful when posting any code snippet
```js
const fn = () => alert('some fn');
```
```css
.hide {
display: none;
}
```
Also can show code difference
```diff
var x = 10;
- const counter = 0;
+ let counter = 0
```
8. Tables
Tables can be generated with headings and text alignment option
| Stocks | Price |
| :------: | ----: |
| TCS | 230 |
| YES Bank | 500 |
Cool Tips
- [Grammarly](https://marketplace.visualstudio.com/items?itemName=znck.grammarly) extension can eliminate typo and grammar mistakes
- [ScreenTOGif](https://www.screentogif.com/) to record videos in GIF format
- Upload GIF's to [giphy](https://giphy.com/) to embed them into blog posts.
- [Stackedit](https://stackedit.io/) for Markdown Editing in Browser.
Result is web page
As the images are shown above, the code snippet and table do not render correctly, missing of styling. For example:
Code block does not have background color
Table is lacking of cell border
I'm using marked package and nextjs to render the markdown file. Below is the code to render it.
import type { GetStaticPaths, GetStaticProps, NextPage } from 'next';
import Head from 'next/head';
import styled from 'styled-components';
import Header from '../../components/Header';
import Footer from '../../components/Footer';
import WhatsApp from '../../components/WhatsApp';
import fs from "fs"
import path from 'path';
import matter from "gray-matter"
import { marked } from "marked"
import moment from 'moment';
const Main = styled.main`
background: white;
width: 95%;
padding-top: 80px;
max-width: 1126px;
margin: auto;
min-height: calc(100vh - 220px);
.section-title {
color: #000;
font-size: 30px;
font-weight: 700;
text-align: center;
margin: 0 auto;
}
.post_coverImage {
width: 100%;
height: 400px;
img {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
}
.post_content {
.post_body {
margin: 50px auto 0;
padding-bottom: 50px;
width: 95%;
}
}
`;
interface PostHeroProps {
image: string
}
const PostHero = styled.div<PostHeroProps>`
width: 100%;
height: 400px;
background-image: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url("${props => props.image}");
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
.post_title {
position: absolute;
left: 20px;
bottom: 0;
width: 95%;
h1 {
color: white;
margin: 0;
}
p {
color: white;
}
}
`
interface PostProps {
frontmatter: any,
content: any,
slug: string
}
const Post: NextPage<PostProps> = ({frontmatter: {title, date, cover_image}, content, slug}) => {
return (
<div style={{background: "#f2f2f2"}}>
<Head>
<title>Idealist Professionals - Igniting your Ideas</title>
<meta name="description" content="About Idealist Pro" />
<link rel="icon" href="/favicon.ico" />
</Head>
<Header activeMenu="blogs" />
<Main>
<PostHero image={cover_image}>
<div className="post_title">
<h1>{title}</h1>
<p>{moment(date).format("MMMM DD, YYYY")}</p>
</div>
</PostHero>
<div className="post_content">
<div className="post_body">
<div dangerouslySetInnerHTML={{__html: marked(content)}}></div>
</div>
</div>
<WhatsApp />
</Main>
<Footer />
</div>
);
};
export default Post;
export const getStaticPaths: GetStaticPaths = async () => {
const files = fs.readdirSync(path.join("public", "posts"));
const paths = files.map((filename: string) => ({
params: {
slug: filename.replace(".md", "")
}
}))
return {
paths,
fallback: false
}
}
export const getStaticProps: GetStaticProps = async ({params}) => {
const slug = params!.slug as string
const markdownWithMeta = fs.readFileSync(path.join("public", "posts", slug + ".md"), "utf-8")
const {data: frontmatter, content} = matter(markdownWithMeta)
return {
props: {
frontmatter,
content,
slug
}
}
}
And, did you somehow add styles for the pre and table?
As #Chris said it looks like your pre and table elements are rendering correctly, the error is in the styles, make sure you are adding styles for your elements in markdown, it is a bit difficult to control styles when working with md. You are using styled-components, but as a test try to add direct styles explicitly for the pre and table elements inside your global styles( globals.css ), if necessary force the style with !important "eye, as a test", and comment what happened.
In my app I have a bunch of different material tables.
I want to find some way to automatically set column width.
I know, I can set this directly in CSS like this and I try this
.mat-column-position {
flex: 0 0 10%;
}
.mat-column-name {
flex: 0 0 25%;
}
.mat-column-weight {
flex: 0 0 25%;
}
.mat-column-symbol {
flex: 0 0 25%;
}
But in this way, I need to manually set the width for every table.
I also try dynamically set CSS with SCSS
#mixin mat-table-columns($columns)
{
.mat-column-
{
#each $colName, $props in $columns {
$width: map-get($props, 'width');
&#{$colName}
{
flex: $width;
min-width: $width;
#if map-has-key($props, 'color')
{
color: map-get($props, 'color');
}
}
}
}
}
#include mat-table-columns((
orderid: (width: 6rem, color: gray),
date: (width: 9rem),
items: (width: 20rem)
));
But in all of these ideas, I need to manually set the width.
I try to find, is there any way to automatically set the width relative to the string with the longest length
| abc | abcdefg | abcdefgh |
| abcde | abc | abc |
| ab | abcdef | abc |
Here is stackblitz for example. Thnx
I would recommend using native table elements, this way your cells will auto resize and you should never have to worry about setting them manually.
<ng-container matColumnDef="position">
<th mat-header-cell *matHeaderCellDef> No. </th>
<td mat-cell *matCellDef="let element"> {{element.position}} </td>
</ng-container>
https://stackblitz.com/edit/angular-8kyrsp-gnhbfd?file=src%2Fapp%2Ftable-flex-basic-example.css
As robbieAreBest suggested, the native table element will resize.
What I didn't know is that all that needs to be done is this:
<table mat-table>
your table
</table>
instead of (old way)
<mat-table>
your table
</mat-table>
See docs for more info
With an accordion each level having a incrementing margin as it goes deeper:
Level 1A
Level 2
Level 3
Level 4
Level 1B
...
CSS:
.level1 {
margin: 1em;
}
.level2 {
margin: 3em;
}
.level3 {
margin: 5em;
}
...
Is there CSS/SCSS syntax like:
.level[n] {
margin: (2n-1)em
}
In SASS/SCSS you can create for loops and generate the necessary amount of classes.
SASS:
#for $i from 1 through 4
.level#{$i}
margin: (2 * $i - 1) * 1em
SCSS:
#for $i from 1 through 4 {
.level#{$i} {
margin: (2 * $i - 1) * 1em ;
}
}
I'm pretty sure there is no pure CSS solution.
I have a problem while trying to do a very basic thing with sass.
I just have the following file structure:
Styles folder:
└───src
├───styles
│ └───_variables.scss // here I have only a variable
| └─── sharedStyles.scss // here are all my vars
|
├─ App.tsx // Where I usee the style
The _variables.scss has only the following:
$my-Blue: #04284D;
And here is my sharedStyles.scss
#import "variables.scss";
.App {
text-align: center;
}
.App-header {
background-color: $my-blue;
height: 150px;
padding: 20px;
}
.App-title {
font-size: 1.5em;
}
.App-intro {
font-size: large;
}
When I compile it I always get the same error:
"message": "Undefined variable: \"$my-blue\".",
"formatted": "Error: Undefined variable: \"$my-blue\".\n on line 8 of src/styles/sharedStyles.scss\n>> background-color: $my-blue;\n\n
I know is pretty basic but I could not understand what's going on here.
I want to add a special style to specific links on my page but I don't want to add a separate class to each link that might appear on a page. I want every 8n+1 (through 8n+8) href to be a different color. So far it's not working using nth-child or nth-of-type. I assume this is because the links are in paragraphs and lists, etc., so they aren't recognized as direct or even sibling selectors, even though the parent selector I'm prefixing it with is the parent.
Here's my CSS:
#main > a:nth-of-type(8n+1) {
color: #ef9623 !important;
}
#main > a:nth-of-type(8n+2) {
color: #dab828 !important;
}
etc. I've tried it with ~ and without either one. None of them seem to work. Is it likely that this will require jquery instead of CSS?
If the links are in paragraphs, than the css selectors need to appropriate. Assuming you have this html:
<div class="wrap">
<p>foo</p>
.
.
.
</div>
To style the links you need to select like this:
div.wrap p:nth-child(8n+2) a { … }
Because the paragraphs are the children to count.
EDIT If some of the links are in paragraphs and some not, you need to create a more flexible selector. One thing you can do is to set a class for each child of the first level like:
<div class="wrap">
<p class="countable">foo</p>
<div class="countable"><a … </a></div
.
.
.
</div>
Than you can select like: div.wrap .countable:nth-child(…) a { … }
I am unsure if even: div.wrap > *:nth-child(…) a { … } could work, but I am pretty sure…
PROOF
EDIT #2
In fact the nth-child pseudo selector will only work for direct children (>), to style each 8th link, no matter where in the HTML you will need to use JS.
$(document).ready(function () {
$.each($('#main a'), function (idx, e) {
// % the nth child
if (idx % 8 == 0) {
//do something with the element
$(e).html('eighth');
}
});
});
This way each link, in appearance in the DOM, will be added to a list and styled if idx % nthChild == 0.
EDIT #3
Finally, the whole thing can be simplified to:
$(document).ready(function () {
$.each($('#main a'), function (idx, e) {
$(e).addClass('nth-' + (idx % 8));
});
});
this will add a class to each link starting from nth-0 going to nth-7 and starting again until all elements are processed.
Thanks to Philipp, this is what I ended up doing:
the js...
$.each($('#main .col-md-9 .entry-content a'), function (idx, e) {
// % the nth child
if (idx % 1 == 0 ) {
$(e).addClass('link-one');
}
if (idx % 2 == 0 ) {
$(e).addClass('link-two');
}
if (idx % 3 == 0 ) {
$(e).addClass('link-three');
}
if (idx % 4 == 0) {
$(e).addClass('link-four');
}
if (idx % 5 == 0) {
$(e).addClass('link-five');
}
if (idx % 6 == 0) {
$(e).addClass('link-six');
}
if (idx % 7 == 0) {
$(e).addClass('link-seven');
}
if (idx % 8 == 0) {
$(e).addClass('link-eight');
}
});
And the CSS...
.link-one {
color: #ef9623 !important;
}
.link-two {
color: #dab828 !important;
}
.link-three {
color: #c0d72f !important;
}
.link-four {
color: #1bbaed !important;
}
.link-five {
color: #aa84b5 !important;
}
.link-six {
color: #e80783 !important;
}
.link-seven {
color: #ef9623 !important;
}
.link-eight {
color: #dab828 !important;
}
This seems to be working perfectly. I'm very happy.